AoT 配置

要在Angular 2中启用AoT，有两种可能的方法：

我们推荐第二种方式，因为它最适合Angular + Webpack工具链。

使用原始ngc的一个问题是ngc会尝试内联CSS，而缺少必要的上下文。 例如，index.css中的@import 'basscss-basic'语句将导致类似于Error: Compilation failed. Resource file not found。 它缺少“basscss-basic”实际上是node_modules内部的节点模块的信息。 另一方面，@ngtools/webpack提供了AopPlugin和与其他加载器/插件共享上下文的Webpack加载器。 所以当ngc由@ngtools/webpack调用时，它可以从其他插件收集必要的信息，如postcss-import，以正确理解像@import 'basscss-basic'。

配置@ngtools/webpack

首先，从npm获取@ngtools/webpack并将其保存为开发依赖关系：

  1. npm install -D @ngtools/webpack

然后，在Webpack配置文件（通常命名为webpack.config.js）中，添加以下代码：

  1. import {AotPlugin} from '@ngtools/webpack'
  3. exports = { /* ... */
  4.   module: {
  5.     rules: [
  6.       {
  7.         test: /\.ts$/,
  8.         loader: '@ngtools/webpack',
  9.       }
  10.     ]
  11.   },
  13.   plugins: [
  14.     new AotPlugin({
  15.       tsConfigPath: 'path/to/tsconfig.json',
  16.       entryModule: 'path/to/app.module#AppModule'
  17.     })
  18.   ]
  19. }

这里@ngtools/webpack替换了其他类型的脚本加载器，如ts-loader或awesome-typescript-loader。 它与AotPlugin一起工作以启用AoT编译。 更多细节可以在 这里找到。
（注意，对于由angular-cli生成的项目，打开AoT可以很简单，因为ng build —aot，但是由于angular-cli不允许为复杂的用例定制webpack配置，它可能不够）。