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

Question

I'm learning Angular 2 with typescript. 我正在用打字稿学习Angular 2。

My first step is a simple hello world with client side typescript compilation. 我的第一步是使用客户端打字稿编译的简单hello世界。 I'm also using wamp 3.0.4. 我也在使用wamp 3.0.4。

So I have 所以我有

index.html 的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/systemjs@0.19.31/dist/system.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3/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 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:typescript@2.0.2/lib/typescript.js'
  },
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
  }
});

main.ts main.ts

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

and app.module.ts 和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 {}

I don't know if everything is necessary but ... it is working. 我不知道是否一切都是必要的，但......它正在发挥作用。

The problem is that if I now modify app.module.ts , let say <h2>Hello my name is {{name}}</h2> the modifications are not shown when I refresh the web page. 问题是如果我现在修改app.module.ts ，让我们说<h2>Hello my name is {{name}}</h2> ，刷新网页时不会显示修改。 To have it working I have to close the browser and open the page again. 为了让它工作，我必须关闭浏览器并再次打开页面。 It is like the compilation was done only once and cached. 这就像编译只进行一次并缓存。

Is it a problem with wamp ? 这是一个问题与wamp？ with my application ? 我的申请？

Answer 1

While I don't use System js it seems like you didn't activate hot reloading. 虽然我不使用System js，但似乎你没有激活热重新加载。 Webpack is simpler if you are a beginner I'd advise to take a look at angular-cli. 如果你是初学者，Webpack会更简单，我建议你看一下angular-cli。

Anyway here it says that you have to use the hot reloader . 无论如何它在这里说你必须使用热重载器。 I think that's what it is, I never used systemjs so... It could also be because of wamp , maybe go for a standard setup (hint: angular-cli, or do like the angular 2 doc does), serving your files should be a one liner in the cmd, no need for wamp or anything weird when you are just starting. 我认为它就是这样，我从来没有使用过systemjs ......也可能是因为wamp ，也许是为了标准设置（提示：angular-cli，或者像棱角2 doc那样），为你的文件服务应该在cmd中是一个衬垫，当你刚开始时不需要wamp或任何奇怪的东西。

Answer 2

After you modify app.module.ts , it is recompiled, since you can see the change after you reopen. 修改app.module.ts ，会重新编译它，因为您可以在重新打开后看到更改。 The modification only works when you close and open the page, I think the reason is about the browser cache. 修改仅在您关闭并打开页面时有效，我认为其原因在于浏览器缓存。 You can try to clear the cache and refresh. 您可以尝试清除缓存并刷新。 And, the recompilation will take some time, like several seconds. 而且，重新编译需要一些时间，比如几秒钟。

The auto-compilation is done by the tool you use. 自动编译由您使用的工具完成。 I think you have some watch in you script of starting test server. 我想你在启动测试服务器的脚本中有一些注意事项。 Maybe you use webpack, or the script (which is used in official getting started tutorial). 也许您使用webpack或脚本（在官方入门教程中使用）。

If you want to compile the typeScript code by yourself, you can use tsc , which is command tool of npm package TypeScript . 如果要自己编译typeScript代码，可以使用tsc ，它是npm包TypeScript命令工具。

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

问题描述

2 个解决方案

解决方案1
0 2017-01-10 09:50:19

解决方案2
0 2017-01-10 10:03:45

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

问题描述

2 个解决方案

解决方案1 0 2017-01-10 09:50:19

解决方案2 0 2017-01-10 10:03:45

解决方案1
0 2017-01-10 09:50:19

解决方案2
0 2017-01-10 10:03:45