Angular 2 with client side typescript compiler

Question

I'm learning Angular 2 with typescript.

My first step is a simple hello world with client side typescript compilation. I'm also using wamp 3.0.4.

So I have

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

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

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

and 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. 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 ? with my application ?

Answer 1

While I don't use System js it seems like you didn't activate hot reloading. Webpack is simpler if you are a beginner I'd advise to take a look at 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.

Answer 2

After you modify app.module.ts , it is recompiled, since you can see the change after you reopen. 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).

If you want to compile the typeScript code by yourself, you can use tsc , which is command tool of npm package TypeScript .

Angular 2 with client side typescript compiler

Question

2 answers

solution1
0 2017-01-10 09:50:19

solution2
0 2017-01-10 10:03:45

Angular 2 with client side typescript compiler

Question

2 answers

solution1 0 2017-01-10 09:50:19

solution2 0 2017-01-10 10:03:45

solution1
0 2017-01-10 09:50:19

solution2
0 2017-01-10 10:03:45