Angular AOT和汇总-无法解析 '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.module和ngc的tsconfig-aot.json编译为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任务

为“开发-SystemJS”案例

打开index.html

为“生产-AOT和汇总摇树”案例打开index-aot.html

此外，它还包含build-invalid gulp任务，该任务跳过了第二步，以显示它导致出现“无法解析'app.module.ngfactory'”错误。

关于Angular AOT和汇总-无法解析 'app.module.ngfactory'，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41740545/