Angular2引导方式：基于JIT的动态引导和基于AOT的静态引导

Angular2引导方式：基于JIT的动态引导和基于AOT的静态引导

 在Angular2，我们会在main.ts里通过引导AppModule来启动应用。针对浏览器，可以选择基于JIT编译器的动态引导和基于AOT编译器的静态引导这两种方式。

基于JIT(Just in Time)编译器的动态引导

在这种方式下，angular会在浏览器端动态编译，然后启动app。

引导使用方式：

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

platformBrowserDynamic().bootstrapModule(AppModule);

基于AOT(Ahead of Time)编译器的静态引导

相对于动态引导，静态引导会预先在build阶段就生成一些工厂类，其中对应AppModule的工厂类为NgAppModuleFactory。

使用静态引导有几个优点：

1. 因为是预先编译好，不需要向浏览器传输Angular的编译器，所以传输的内容更小。
2. 和动态引导需要在浏览器端即时编译不同，静态引导从服务端下载完代码后可即时启动，启动比较快。

对于移动设备和一些低延时网络里，这两个有点显得很重要。

在main.ts使用AOT模式

import { platformBrowser } from '@angular/platform-browser';
import { AppModuleNgFactory } from './app.module.ngfactory';

platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

这里要注意：app.module.ngfactory文件不需要手动编码，它是编译期自动生成，对应生成AppModuleNgFactory。

JIT和AOT编译器都会生产AppModuleNgFactory，只是方式不一样。JIT在浏览器，缓存里实时生产AppModuleNgFactory 。AOT编译器会生产一个物理文件app.module.ngfactory。AOT模式引入这个文件，然后启动：

import { AppModuleNgFactory } from './app.module.ngfactory';

生成app.module.ngfactory

@angular/compiler-cli提供了tsc和AOT两种编译器，把TypeScript转换为Javascript：

安装ngc

npm install @angular/compiler-cli typescript@next @angular/platform-server @angular/compiler

转换

$ ngc -p src