Angular 2与客户端打字稿编译器

我的第一个步骤是一个简单的Hello World与客户端打字稿编译。我也使用wamp 3.0.4。

所以我

的index.html

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Hello Angular</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <style> 
     body {color:#369;font-family: Arial,Helvetica,sans-serif;} 
    </style> 
    <script src="https://unpkg.com/[email protected]/dist/system.js"></script> 
    <script src="https://unpkg.com/[email protected]/Reflect.js"></script> 
    <script src="https://unpkg.com/zone.js/dist/zone.js"></script> 
    <script> 
     System.import('config.js').then(() => { 
     System.import('app') 
     }).catch((err) => { console.error("System.import Error",err) }) 
    </script> 
    </head> 
    <body> 
    <h1>Angular 2 with TypeScript</h1> 
    <my-app>Loading AppComponent content here ...</my-app> 
    </body> 
</html>

config.js

System.config({ 
    transpiler: 'typescript', 
    typescriptOptions: { 
    emitDecoratorMetadata: true 
    }, 
    paths: { 
    'npm:': 'https://unpkg.com/' 
    }, 
    map: { 
    'app': './app', 
    '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 
    '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 
    '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 
    '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 
    '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 
    '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 
    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 
    'rxjs': 'npm:rxjs', 
    'typescript': 'npm:[email protected]/lib/typescript.js' 
    }, 
    packages: { 
    app: { 
     main: './main.ts', 
     defaultExtension: 'ts' 
    } 
});

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 
import { AppModule } from './app.module'; 
platformBrowserDynamic().bootstrapModule(AppModule)

和app.module.ts

import {Component,NgModule} from '@angular/core' 
import {BrowserModule} from '@angular/platform-browser' 
@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>Hello {{name}}</h2> 
    </div> 
    `, 
}) 
export class App { 
    name:string; 
    constructor() { 
    this.name = 'Angular2' 
    } 
} 
@NgModule({ 
    imports: [ BrowserModule ], 
    declarations: [ App ], 
    bootstrap: [ App ] 
}) 
export class AppModule {}

我不知道，如果一切是必要的，但...这是工作。

问题是，如果我现在修改app.module.ts，比如说<h2>Hello my name is {{name}}</h2>，当我刷新网页时不会显示这些修改。为了让它工作，我必须关闭浏览器并再次打开页面。这就像汇编只做了一次并被缓存。

这是一个wamp问题吗？与我的申请？

来源

2017-01-10 tweetysat

因此，你正在创建一个基于Web的Typescript编辑器，在客户端上转换为Javascript？ – Jackalope

虽然我不使用系统js，但似乎没有激活热重新加载。如果你是初学者，Webpack会更简单，我建议你看看angular-cli。

反正here它说，你必须使用hot reloader。 我认为这是它是什么，我从来没有使用过systemjs所以......这也可能是因为wamp，也许去一个标准设置（提示：角CLI或不喜欢的角2文档一样），你的服务文件应该是cmd中的一行代码，当你刚刚启动时，不需要任何弄脏或任何奇怪的事情。

来源

2017-01-10 09:50:19 Ced

修改app.module.ts后，它被重新编译，因为你可以看到你重新打开后的变化。修改只适用于关闭并打开页面时，我认为原因是关于浏览器缓存。您可以尝试清除缓存并刷新。而且，重新编译需要一些时间，比如几秒钟。

自动编译由您使用的工具完成。我认为你有一些看你的脚本启动测试服务器。也许你使用webpack，或者脚本（这是在官方入门教程中使用）。

如果你想自己编译typeScript代码，你可以使用tsc，它是npm包的命令工具TypeScript。

来源

2017-01-10 10:03:45 Mavlarn

Angular 2与客户端打字稿编译器

回答

相关问题