The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Lazy Load Angular 2 Modules with the Router

Lazy Load Angular 2 Modules with the Router

5:15
Angular 2 lazy loading is a core feature of Angular 2. Lazy loading allows your application to start up faster because it only needs to use the main App Module when the page initially loads. As you navigate between routes, it will load the additional modules as you define them in your routes. Make sure to properly organize your files into Angular 2’s module pattern so that files that belong to each module don’t get required by other modules.
Watch this lesson now
Avatar
egghead.io

Angular 2 lazy loading is a core feature of Angular 2. Lazy loading allows your application to start up faster because it only needs to use the main App Module when the page initially loads. As you navigate between routes, it will load the additional modules as you define them in your routes. Make sure to properly organize your files into Angular 2’s module pattern so that files that belong to each module don’t get required by other modules.

Avatar
Mac

{path: '', loadChildren: 'app/home/home.module'}

When using webpack, this results in an error: module app/home/home.module not found.
Anyone knows how to get this working with webpack?

Avatar
Spencer

I'm also using webpack - and am getting a "Uncaught (in promise): ReferenceError: System is not defined" error with this configuration. It only started once I began refactoring using the Lazy Load method above.

I understand this tutorial is using System.js - does the loadChildren config require System.js ??

Avatar
John

System.js is not a requirement, just the default. Webpack loaders are available such as https://github.com/Quramy/angular2-load-children-loader

In reply to Spencer
Avatar
John

I believe there's currently a bug/limitation around using default exports.

So you would target the @NgModule with loadChildren:'app/home/home.module#HomeModule' (where HomeModule is the exported class name of the module).

In reply to Mac
Avatar
Noah Rawlins

I can't get this to work using webpack based v17 of the angular-cli and 2.1 of angular 2. It tells me it can't find the home module.

edit: i got it to work. apparently with cli version 17 you need to use relative paths. so './home/home.component#HomeComponent'

In reply to John
Avatar
Jon

Tried your solution and it still doesn't work for me using webpack (in the angular CLI).

In reply to Noah Rawlins
Avatar
Charles

Same here, and solved here:

http://stackoverflow.com/questions/39493782/lazy-loading-in-angular2-rc7-and-angular-cli-webpack

Check my comment since i had a slighly different workaround.

Avatar
qemweb

I almost tried everything and still the same issue:
error_handler.js:50 EXCEPTION: Uncaught (in promise): Error: Cannot find module 'app/home/home.module' .
you can see more details about my issue here : http://stackoverflow.com/questions/41396839/exception-uncaught-in-promise-error-cannot-find-module-app-home-home-modul

Please can someone help me !!

Avatar
qemweb

it turns out that it's working on plunker but not on my machine !!!!!!!
https://plnkr.co/edit/RjhjnWMBeC3xyPAPmh7c?p=preview someone to help please !!!

In reply to qemweb
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?