Angular2 AOT compilation with lazy loaded modules and systemjs

Question

Short version:

Does angular2 (currently 2.2.1) using the systemJS as per the quickstart work with both lazy loaded modules with ahead of time compilation?

Longer version:

I'm fairly new to angular2, and have been following along with the quickstart and additional docs on angular.io to create a simple site with a few components, seperated out into modules that are lazy loaded through the routing.

So following along here: https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

I've followed through all the instructions, I've got output in the aot folder with the '"node_modules/.bin/ngc" -p tsconfig-aot.json' command, and I have an 'build.js' file in my dist folder after running the '"node_modules/.bin/rollup" -c rollup-config.js' command.

I've setup my index.html removing system.js and referencing my build.js output instead.

My initial run of that fails, complaining that it doesn't know what 'System' is. I thought with the build process, I no longer required system.js, so not sure what's happening there.

If I include system.js and run again, I get the following stack trace in my error:

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

It's curious that it's trying to load 'http://localhost:3000/app/shell/layout.module.ngfactory', that is one my lazy loaded modules.

Does AOT just not work with lazy loaded modules?

Answer 1

I think the problem is not with AOT, but that rollup doesn't work with lazy-loaded modules, because rollup doesn't support code splitting (yet, there's an open issue). So since rollup can only produce a single output file, there is no concept of lazy-loading - everything is already loaded!

Answer 2

Yes. The Angular2 quickstart with loadChildren can not work well in AOT. You can develop in JiT and wait the upgrading of angular、rollup. Or you can use webpack instead of rollup. Angular-cli is support AOT and lazy loaded now.You can try it https://github.com/angular/angular-cli/