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?

Seems this is an open issue: 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
– MIP1983, Commented Nov 25, 2016 at 13:58

nickspoon · Accepted Answer · 2016-11-23 09:38:47Z

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!

answered Nov 23, 2016 at 9:38

nickspoon

1,39713 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

MIP1983 Over a year ago

Thanks for that, that makes sense. Wish it said as much in the docs, would have saved me some time.

nickspoon Over a year ago

Yes it would have saved me a lot of time too!

Rodney Over a year ago

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?)

Zesen Liu · Accepted Answer · 2017-01-12 17:34:46Z

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/

answered Jan 12, 2017 at 17:34

Zesen Liu

113 bronze badges

Collectives™ on Stack Overflow

Angular2 AOT compilation with lazy loaded modules and systemjs

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related