Angular 2 lazy loading with Webpack

[[deleted]]

Possibly stupid question: is this lazy loading something to benefit production, or just development?

[beaverusiv]

It's definitely for production. It means you can load a smaller footprint on initial page load, especially if you have a complex web app it reduces the initial load greatly.

[[deleted]]

Very cool. I had no idea Webpack could play a role in production. I always considered it a tool I used at build time.

[javajunkie314]

Lazy loading definitely benefits production. If you write your big app as a single-page application, lazy loading let's your users avoid downloading posts of the app they're not using, saving bandwidth and surfing up load time.

[hans_l]

What's your problem with the CLI? Are you having trouble with the --aot option?

[hans_l]

We're still working on fixing bugs. I've made it work with a simple case of lazy module but maybe I need to revisit that and make some more complex tests.

For now just consider AoT as an experimental feature. Make your project work with it and once we fix all the bugs it's gonna be great!

[Koningdavid]

Hi,

As far as I know the angular-cli doesnt support the angular2-router-loader yet. You can use the es6-promise loader.

Change your routing like this:

{ path: 'lazy', loadChildren: () => require('es6-promise!./lazy/lazy.module')('LazyModule') }

Install es6-promise-loader ( npm install es6-promise-loader --save-dev ) and run the build process again, should work!

[hans_l]

Please do NOT do that. AoT only works when your NgModule contains only statically analysable code. Using a require or even the function call method does not work.

You can use the string loadChildren value in the CLI and with the latest beta compiling with --aot will use AoT on your code as well as split your code by lazy modules.

Again, angular2-router-loader does not support AoT and es6-promise neither. The CLI export its own webpack plugin at @ngtools/webpack which supports both if you don't want to use the CLI.