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 个文件。

这里有两个重要说明：

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

具体步骤如下：

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

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

安装节点包
运行 gulp - default 任务
打开 index.html "Development - SystemJS" 个案例
打开 index-aot.html "Production - AOT & Rollup Tree-shaking" 个案例

它还包含跳过第二步的 build-invalid gulp 任务，以表明它会导致 "Could not resolve 'app.module.ngfactory'" 错误。

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

Angular AOT & Rollup - Could not resolve 'app.module.ngfactory'

angular

rollup