Angular AOT 和汇总 - 无法解析 'app.module.ngfactory'

Question

我正在尝试完成 Angular 的 AOT 教程:
https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

使用 ngc 部分有效并生成 aot 文件夹。但是，当涉及到 rollup 部分的 tree-shaking 时，我遇到了这个错误:

Error: Could not resolve '../aot/app/app.module.ngfactory' from ...\app\main-aot.js
    at Error (native)
    at ...\node_modules\rollup-plugin-node-resolve\dist\rollup-plugin-node-resolve.cjs.js:78:21
    at ...\node_modules\resolve\lib\async.js:56:18
    at load (...\node_modules\resolve\lib\async.js:70:43)
    at onex (...\node_modules\resolve\lib\async.js:93:31)
    at ...\node_modules\resolve\lib\async.js:23:47
    at FSReqWrap.oncomplete (fs.js:82:15)

我错过了什么吗？

@ Angular :2.4.4
汇总:0.41.4

Answer 1

Angular 的 AOT 教程似乎缺少一个步骤；使用ngc后，它只会在aot文件夹中生成ts文件。下一步，您需要再次编译这些文件，以生成必要的 js 文件。

这里有两个重要的注意事项:

1. 您需要将这些 ts 文件编译为 es2015 模块，以便从“tree-shaking”中受益。这意味着必须有一个配置文件 (tsconfig-compile-aot.json) 只指向 main-aot.ts 文件。
2. 在第 1 步之后，您项目中所有相关的 ts 文件将被编译为 es2015 模块。如果您在开发环境中使用 systemjs 作为模块加载器和 commonjs 模块(如 Angular 的教程)，在使用 rollup 之后，您需要将您的 ts 文件再编译一次作为 commonjs 模块，以避免 systemjs 出现问题。

具体步骤如下:

1. 使用ngc 和tsconfig-aot.json 将您的app.module 编译到aot 文件夹中作为es2015 模块。
2. 用tsc和tsconfig-compile-aot.json编译main-aot.ts文件，还是es2015 模块并生成你的 js 文件。
3. 将您的条目文件 (main-aot.js) 传递给 rollup。现在它应该会生成没有任何错误的输出文件。
4. 当你想继续使用 systemjs 进行开发时，使用 tsconfig.json 编译你的 app/ts 文件，将它们转换为 commonjs 模块。

---

我创建了一个使用这些步骤的演示应用程序:
https://github.com/forCrowd/Labs-Angular-AOTConfiguration

• 安装节点包
• 运行gulp - 默认任务
• 为“开发 - SystemJS”案例打开 index.html
• 为“Production - AOT & Rollup Tree-shaking”案例打开 index-aot.html

它还包含跳过第二步的 build-invalid gulp 任务，以表明它会导致“无法解析‘app.module.ngfactory’”错误。