角度AOT&汇总-无法解析"app.module.ngfactory"

问题描述

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

I am trying to complete Angular's AOT tutorial:
https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

使用ngc部分有效，并且生成aot文件夹.但是，当涉及到rollup部分的摇树时，我碰到了这个错误:

Using ngc part works and it generates aot folder.However, when it comes to tree-shaking with rollup part, I bump into this error:

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)

我想念什么吗?

@角度:2.4.4
汇总:0.41.4

@angular: 2.4.4
rollup: 0.41.4

推荐答案

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

Angular's AOT tutorial seems missing a step; after using ngc, it generates only ts files in aot folder. As the next step, you need to compile these files one more time, to generate the necessary js files.

这里有两个重要说明:

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

1. You need to compile these ts files as es2015 modules, in order to benefit from "tree-shaking". This means there must be one more config file (tsconfig-compile-aot.json) that only points to main-aot.ts file.
2. After step 1, all related ts files in your project will be compiled as es2015 modules. If you're using systemjs as a module loader and commonjs modules in your development environment (as in Angular's tutorials), after using rollup, you need to compile your ts files one more time as commonjs modules, in order to avoid issues with systemjs.

以下是确切步骤:

1. 使用ngc和tsconfig-aot.json将app.module编译为es2015模块到aot文件夹中.
2. 再次使用tsc和tsconfig-compile-aot.json编译main-aot.ts文件作为es2015模块，并生成您的js文件.
3. 将输入文件(main-aot.js)传递到rollup.现在，它应该会生成您的输出文件，而不会出现任何错误.
4. 如果要继续使用systemjs进行开发，请使用tsconfig.json编译app/ts文件，以将其再次转换为commonjs模块.

1. Compile your app.module with ngc and tsconfig-aot.json into aot folder as es2015 modules.
2. Compile main-aot.ts files with tsc and tsconfig-compile-aot.json, again as es2015 modules and generate your js files.
3. Pass your entry file (main-aot.js) to rollup. Now it should generate your output file without any errors.
4. When you want to continue to your development with systemjs, compile your app/ts files with tsconfig.json to convert them to commonjs modules again.

---

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

---

I have created a demo application that is using these steps:
https://github.com/forCrowd/Labs-Angular-AOTConfiguration

• 安装节点软件包
• 运行gulp-default任务
• 针对开发-SystemJS"案例打开index.html
• 为生产-AOT和汇总摇树"案例打开index-aot.html

• Install node packages
• Run gulp - default task
• Open index.html for "Development - SystemJS" case
• Open index-aot.html for "Production - AOT & Rollup Tree-shaking" case

它还包含build-invalid gulp任务，该任务跳过了第二步，表明它导致出现无法解析'app.module.ngfactory'"错误.

Also it contains build-invalid gulp task that skips this second step, to show that it results in having "Could not resolve 'app.module.ngfactory'" error.

这篇关于角度AOT&汇总-无法解析"app.module.ngfactory"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！