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!