• AoT 配置
    • 配置@ngtools/webpack

    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'
    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配置，它可能不够）。