Angular のJITコンパイラとAOTコンパイラ

Angular のJITコンパイラとAOTコンパイラ
1. 関連

Angular のJITコンパイラとAOTコンパイラ

AngularにはコンパイラがJITとAOTがあります。

JITは実行時にブラウザでアプリケーションをコンパイルします。

AOTはビルド時にアプリケーションをコンパイルします。また、テンプレートもコンパイル対象となります。

AOTでコンパイルするには

ng serve --aot

とします。AOTコンパイルだと事前コンパイルになるので、レンダリングが早くなります。

テンプレートもコンパイル対象となる為、セキュリティの観点からもAOTコンパイラを使用するのが良いようです。

テンプレートファイルがコンパイル対象になるとは

テンプレートファイルもコンパイル対象になりますが、これは具体的にどういうことかというと、以下のように引数を一つ持つハンドラがあるとします。

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template:
  `
  <h3>{{title}}</h3>
  <button (click)='onClick()'>ボタン</button>
  `,
  styleUrls: ['./app.component.styl']
})
export class AppComponent {
  title = 'testapp';
  public onClick(str: string){
    this.title = str;
  }
}

これをng serve --aotでコンパイルすると以下のエラーが発生し、起動することができません。

$ ng serve --aot
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

Date: 2018-10-23T12:25:15.551Z
Hash: b6e5471b4ece023f3372
Time: 7117ms
chunk {main} main.js, main.js.map (main) 1.94 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 697 bytes [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.22 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 17.1 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 326 kB [initial] [rendered]

ERROR in src\app\app.component.ts.AppComponent.html(3,11): : Expected 1 arguments, but got 0.

テンプレートで引数を指定するか、コンポーネント側で引数なしにするか、どちらかしないとAOTではコンパイルが通りません。

開発時はJIT、本番はAOTかなと思います。

ちなみにng build --prodとすると、AOTになります。

Angular CLIでプロキシファイルを設定する方法