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與客戶端打字稿編譯器

回答

相關問題