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

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