• 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'
    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配置,它可能不够)。