　　AOT是Ahead of Time compile 的缩写，顾名思义提前编译。

　　关于AOT的好处，在这里就不一一细说，更高效，更安全，bla，bla....

　　与AOT相对的则是JIT(Just in time),翻译成中文就是即时编译。

　　对于浏览器而言，只认识JavaScript代码，什么angular，typescript，html通通不认识。所以需要将我们写好的诸多的angular组件翻译成浏览器认识的语言。所以AOT 和 JIT 的本质区别就是， AOT是一种在构建阶段(build)就将其翻译成JavaScript的过程，而JIT 则是在运行阶段即刻翻译的过程。

　　本文重点要说明的是对AOT的使用:

安装依赖包

　　AOT编译使用ngc编译器进行编译，他是typescript编译器tsc的高仿品，他们的配置方式几乎一模一样。

npm install@angular/compiler-cli @angular/platform-server--save

　　配置文件 tsconfig-aot.json

　　ngc需要一个AOT专用配置文件。

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es2015", "dom"],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "typeRoots": [
      "./node_modules/@types/"
    ]
  },

  "files": [
    "src/app/app.module.ts",
    "src/main.ts"
  ],

  "angularCompilerOptions": {
   "genDir": "aot",
   "skipMetadataEmit" : true
 }
}

　　对比JIT编译， compilerOption里面只把module改成了es2015.
　　真正和ngc有关的配置是angularCompilerOptions部分的内容。它的genDir属性告诉编译器把编译结果保存在新的aot目录下。"skipMetadataEmit" : true属性阻止编译器为编译后的应用生成元数据文件。当输出成TypeScript文件时，元数据并不是必须的，因此不需要包含它们。

特别注意: AOT编译要求模板URL和外部cssU URL的值是一个相对于组件类文件的URL值

编译应用

　　使用ngc编译器对应用进行编译

node_modules/.bin/ngc -p tsconfig-aot.json

　　编译完成后，会生成一个aot目录，目录下面是一组NgFactory文件。每一个工厂文件都会在运行时结合JavaScript所封装的css文件和模板文件，创建对应的组件实例。

启动应用(bootstrap)

　　启动应用时候，从原来引导AppModule改成了引导工厂模块AppModuleNgFactory.

配置build命令

package.json 里面添加

"build": npm run build:aot"

总结

　　开发器使用JIT, 产品期使用AOT

ng build --aot 与 ng build --prod

安装依赖包

配置文件 tsconfig-aot.json

编译应用

启动应用(bootstrap)

配置build命令

总结

推荐文章: