Angular 2
角度2のAhead（Ahead-of-time）コンパイル

コンパイラにAngular 2依存関係をインストールする

注：最適な結果を得るには、プロジェクトがAngular-CLIを使用して作成されていることを確認してください。

npm install angular/{core,common,compiler,platform-browser,platform-browser-dynamic,http,router,forms,compiler-cli,tsc-wrapped,platform-server}

これらの依存関係がインストールされている場合は、このステップを実行する必要はありません。 compilerがそこにあることを確認してください。

2. `angularCompilerOptions`を` tsconfig.json`ファイルに追加します

...
"angularCompilerOptions": {
    "genDir": "./ngfactory"
}
...

これはコンパイラの出力フォルダです。

3.角度コンパイラであるngcを実行します。

./node_modules/.bin/ngc -p srcここで、 srcはすべての角度2コードが存在する場所です。これにより、コンパイルされたコードがすべてngfactoryというフォルダが生成されます。

"node_modules/.bin/ngc" -p src for windows

4. NgFactoryと静的プラットフォームブラウザを使用するために `main.ts`ファイルを修正します。

// this is the static platform browser, the usual counterpart is @angular/platform-browser-dynamic.
import { platformBrowser } from '@angular/platform-browser';

// this is generated by the angular compiler
import { AppModuleNgFactory } from './ngfactory/app/app.module.ngfactory';

// note the use of `bootstrapModuleFactory`, as opposed to `bootstrapModule`.
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

この時点でプロジェクトを実行できるはずです。この場合、私のプロジェクトはAngular-CLIを使用して作成されました。

> ng serve

なぜコンパイルが必要なのか、イベントの流れと編集の流れ？

Q.コンパイルが必要な理由Ans。 Angularアプリケーションのより高いレベルの効率を達成するためには、コンパイルが必要です。

次の例を見てみましょう。

// ...
compile: function (el, scope) {
  var dirs = this._getElDirectives(el);
  var dir;
  var scopeCreated;
  dirs.forEach(function (d) {
    dir = Provider.get(d.name + Provider.DIRECTIVES_SUFFIX);
    if (dir.scope && !scopeCreated) {
      scope = scope.$new();
      scopeCreated = true;
    }
    dir.link(el, scope, d.value);
  });
  Array.prototype.slice.call(el.children).forEach(function (c) {
    this.compile(c, scope);
  }, this);
},
// ...

上記のコードを使用してテンプレートをレンダリングすると、

<ul>
  <li *ngFor="let name of names"></li>
</ul>

以下に比べてはるかに遅いです：

// ...
this._text_9 = this.renderer.createText(this._el_3, '\n', null);
this._text_10 = this.renderer.createText(parentRenderNode, '\n\n', null);
this._el_11 = this.renderer.createElement(parentRenderNode, 'ul', null);
this._text_12 = this.renderer.createText(this._el_11, '\n  ', null);
this._anchor_13 = this.renderer.createTemplateAnchor(this._el_11, null);
this._appEl_13 = new import2.AppElement(13, 11, this, this._anchor_13);
this._TemplateRef_13_5 = new import17.TemplateRef_(this._appEl_13, viewFactory_HomeComponent1);
this._NgFor_13_6 = new import15.NgFor(this._appEl_13.vcRef, this._TemplateRef_13_5, this.parentInjector.get(import18.IterableDiffers), this.ref);
// ...

Ahead-of-Time Compilationによるイベントの流れ

対照的に、AoTでは次のステップを実行します。

1. TypeScriptを用いたAngular 2アプリケーションの開発
2. ngcによるアプリケーションのコンパイル。
3. Angularコンパイラを使用してTypeScriptにテンプレートをコンパイルします。
4. JavaScriptへのTypeScriptコードのコンパイル。
5. 束ねる。
6. 細分化。
7. 展開。

上記のプロセスはやや複雑に思えますが、ユーザーは次の手順のみを実行します。

1. すべてのアセットをダウンロードしてください。
2. 角度のあるブートストラップ
3. アプリケーションがレンダリングされます。

あなたが見ることができるように、より速く/より良いUXを意味し、angle2-seedやangular-cliのようなツールの上に構築プロセスを劇的に自動化する3番目のステップが見当たらないのです。

それがあなたを助けてくれることを願っていますありがとうございました！

Angular CLIでのAoTコンパイルの使用

Angular CLIのコマンドラインインターフェイスには、Beta 17以降のAoTコンパイルサポートがあります。

AoTコンパイルでアプリケーションをビルドするには、次のコマンドを実行します。

ng build --prod --aot