使用延迟加载模块和 systemjs 的 Angular2 AOT 编译
Angular2 AOT compilation with lazy loaded modules and systemjs
简短版本:
根据快速入门使用 systemJS 的 angular2(当前为 2.2.1)是否可以与提前编译的延迟加载模块一起使用?
更长的版本:
我是 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' 是什么。我想在构建过程中,我不再需要 system.js,所以不确定那里发生了什么。
如果我再次包含 system.js 和 运行,我会在错误中得到以下堆栈跟踪:
Failed to load resource: the server responded with a status of 404 (Not Found)
build.js:3 EXCEPTION: Uncaught (in promise): Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/app/shell/layout.module.ngfactory
Error: XHR error (404 Not Found) loading http://localhost:3000/app/shell/layout.module.ngfactory
at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:698:29)
at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:265:35)
at Object.onInvokeTask (http://localhost:3000/dist/build.js:4:15086)
at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:264:40)
at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:154:47)
at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:335:33)
Error loading http://localhost:3000/app/shell/layout.module.ngfactory
(SystemJS) XHR error (404 Not Found) loading http://localhost:3000/app/shell/layout.module.ngfactory
Error: XHR error (404 Not Found) loading http://localhost:3000/app/shell/layout.module.ngfactory
at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:698:29)
at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:265:35)
at Object.onInvokeTask (http://localhost:3000/dist/build.js:4:15086)
at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:264:40)
at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:154:47)
at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:335:33)
Error loading http://localhost:3000/app/shell/layout.module.ngfactory
奇怪的是它正在尝试加载“http://localhost:3000/app/shell/layout.module.ngfactory”,这是我延迟加载的模块之一。
AOT 是否不适用于延迟加载的模块?
我认为问题不在于 AOT,而是 rollup 不适用于延迟加载模块,因为 rollup 不支持代码拆分(但是,有一个open issue)。所以因为 rollup 只能产生一个输出文件,所以没有延迟加载的概念——一切都已经加载了!
是的。带有 loadChildren 的 Angular2 quickstart 在 AOT 中不能很好地工作。
可以JiT开发,等待angular、rollup升级。
或者你可以使用 webpack 而不是 rollup。 Angular-cli支持AOT和懒加载now.You可以试试https://github.com/angular/angular-cli/
简短版本:
根据快速入门使用 systemJS 的 angular2(当前为 2.2.1)是否可以与提前编译的延迟加载模块一起使用?
更长的版本:
我是 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' 是什么。我想在构建过程中,我不再需要 system.js,所以不确定那里发生了什么。
如果我再次包含 system.js 和 运行,我会在错误中得到以下堆栈跟踪:
Failed to load resource: the server responded with a status of 404 (Not Found) build.js:3 EXCEPTION: Uncaught (in promise): Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/app/shell/layout.module.ngfactory Error: XHR error (404 Not Found) loading http://localhost:3000/app/shell/layout.module.ngfactory at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:698:29) at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:265:35) at Object.onInvokeTask (http://localhost:3000/dist/build.js:4:15086) at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:264:40) at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:154:47) at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:335:33) Error loading http://localhost:3000/app/shell/layout.module.ngfactory (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/app/shell/layout.module.ngfactory Error: XHR error (404 Not Found) loading http://localhost:3000/app/shell/layout.module.ngfactory at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:698:29) at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:265:35) at Object.onInvokeTask (http://localhost:3000/dist/build.js:4:15086) at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:264:40) at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:154:47) at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:335:33) Error loading http://localhost:3000/app/shell/layout.module.ngfactory
奇怪的是它正在尝试加载“http://localhost:3000/app/shell/layout.module.ngfactory”,这是我延迟加载的模块之一。
AOT 是否不适用于延迟加载的模块?
我认为问题不在于 AOT,而是 rollup 不适用于延迟加载模块,因为 rollup 不支持代码拆分(但是,有一个open issue)。所以因为 rollup 只能产生一个输出文件,所以没有延迟加载的概念——一切都已经加载了!
是的。带有 loadChildren 的 Angular2 quickstart 在 AOT 中不能很好地工作。 可以JiT开发,等待angular、rollup升级。 或者你可以使用 webpack 而不是 rollup。 Angular-cli支持AOT和懒加载now.You可以试试https://github.com/angular/angular-cli/