Angular2 AOT 编译与延迟加载模块和 systemjs

Question

短版：

angular2（当前为 2.2.1）是否按照快速入门使用 systemJS 与提前编译的两个延迟加载模块一起工作？

加长版：

我是 angular2 的新手，并且一直在关注 angular.io 上的快速入门和其他文档，以创建一个包含一些组件的简单站点，这些组件被分离成通过路由延迟加载的模块。

所以跟随这里：https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

我已按照所有说明进行操作，我在 aot 文件夹中使用 '"node_modules/.bin/ngc" -p tsconfig-aot.json' 命令得到了输出，并且我有一个 'build.js ' 运行 '"node_modules/.bin/rollup" -c rollup-config.js' 命令后，我的 dist 文件夹中的文件。

我已经设置了我的 index.html，删除了 system.js 并引用了我的 build.js 输出。

我最初的运行失败了，抱怨它不知道“系统”是什么。我认为在构建过程中，我不再需要 system.js，所以不确定那里发生了什么。

如果我包含 system.js 并再次运行，我的错误中会出现以下堆栈跟踪：

加载资源失败：服务器响应状态为 404（未找到） build.js:3 例外：未捕获（承诺中）：错误：（SystemJS）XHR 错误（404 未找到）正在加载 http://localhost:3000/app/shell/layout.module.ngfactory 错误：XHR 错误（404 未找到）正在加载 http://localhost:3000/app/shell/layout.module.ngfactory 在 XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:698:29) 在 ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:265:35) 在 Object.onInvokeTask (http://localhost:3000/dist/build.js:4:15086) 在 ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:264:40) 在 Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:154:47) 在 XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:335:33) 加载时出错http://localhost:3000/app/shell/layout.module.ngfactory (SystemJS) XHR 错误 (404 Not Found) 加载http://localhost:3000/app/shell/layout.module.ngfactory 错误：XHR 错误（404 未找到）正在加载 http://localhost:3000/app/shell/layout.module.ngfactory 在 XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:698:29) 在 ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:265:35) 在 Object.onInvokeTask (http://localhost:3000/dist/build.js:4:15086) 在 ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:264:40) 在 Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:154:47) 在 XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:335:33) 加载时出错http://localhost:3000/app/shell/layout.module.ngfactory

奇怪的是它正在尝试加载“http://localhost:3000/app/shell/layout.module.ngfactory”，这是我懒加载的模块之一。

AOT 是否不适用于延迟加载的模块？

Answer 1

是的。带有 loadChildren 的 Angular2 快速入门在 AOT 中无法正常工作。 可以在 JiT 中开发，等待 angular、rollup 的升级。 或者你可以使用 webpack 代替 rollup。 Angular-cli现在支持AOT和懒加载了，你可以试试https://github.com/angular/angular-cli/

Answer 2

我认为问题不在于 AOT，而是 rollup 不适用于延迟加载的模块，因为 rollup 不支持代码拆分（但是，有一个 open issue）。因此，由于 rollup 只能生成单个输出文件，因此没有延迟加载的概念 - 一切都已加载！