4

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?

MIP1983
  • 1,354
  • 1
  • 15
  • 25
  • Seems this is an open issue: https://github.com/angular/angular/issues/11075 Very frustrating that the quickstart and docs just lead you to this dead end where you can't output a prod ready app (the download size is just too big). – MIP1983 Nov 25 '16 at 13:58

2 Answers2

3

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!

nickspoon
  • 1,347
  • 12
  • 18
  • Thanks for that, that makes sense. Wish it said as much in the docs, would have saved me some time. – MIP1983 Nov 23 '16 at 13:10
  • Yes it would have saved me a lot of time too! – nickspoon Nov 23 '16 at 20:04
  • Are you guys saying that the benefits from LazyLoaded modules (e.g. allow Prod ng2 apps to be downloaded in chunks as required) cannot be realised at this time (and hence there is not much point in using lazy loaded modules?) – Rodney Jan 05 '17 at 19:26
0

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/

Zesen Liu
  • 11
  • 3