Question

我正在尝试完成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

Answer 1

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任务
打开index.html“开发 - SystemJS”案例
打开index-aot.html进行“制作 - AOT＆amp; Rollup Tree-shaking”案例

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

Angular AOT＆amp;汇总 - 无法解析'app.module.ngfactory'

1 个答案: