AoT 配置

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

• 直接使用ngc
• 使用@ngtools/webpack

我们推荐第二种方式，因为它最适合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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

import {AotPlugin} from '@ngtools/webpack'

exports = { /* ... */
  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: '@ngtools/webpack',
      }
    ]
  },

  plugins: [
    new AotPlugin({
      tsConfigPath: 'path/to/tsconfig.json',
      entryModule: 'path/to/app.module#AppModule'
    })
  ]
}

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