Angular AOT&Rollup - 无法解析'app.module.ngfactory'

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

使用ngc零件工作,它生成aot文件夹.然而,当谈到树摇动的rollup部分时,我遇到了这个错误:

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

Angular的AOT教程似乎缺少一步; 使用后ngc,它只生成ts文件aot夹中的文件.下一步,您需要再次编译这些文件,以生成必要的js文件.

这里有两个重要的注释:

您需要将这些ts文件编译为es2015模块,以便从"树摇动"中受益.这意味着必须有一个tsconfig-compile-aot.json仅指向main-aot.ts文件的配置文件().

在步骤1之后,ts项目中的所有相关文件将编译为es2015模块.如果您在开发环境中使用systemjs模块加载器和commonjs模块(如在Angular的教程中),在使用之后rollup,您需要再次将ts文件编译为commonjs模块,以避免出现问题systemjs.

以下是确切的步骤:

将您的app.modulewith ngc和tsconfig-aot.jsoninto aot文件夹编译为es2015模块.

main-aot.ts使用tsc和编译文件tsconfig-compile-aot.json,再次作为es2015模块编译并生成js文件.

将您的输入文件(main-aot.js)传递给rollup.现在它应该生成你的输出文件没有任何错误.

如果要继续进行开发systemjs,请编译app/ts文件以再次tsconfig.json将其转换为commonjs模块.

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

安装节点包

运行gulp- default任务

打开index.html"开发 - SystemJS"案例

打开index-aot.html"生产 - AOT和Rollup Tree-shaking"案例

它还包含build-invalidgulp任务,跳过第二步,以显示它导致"无法解析'app.module.ngfactory'"错误.