Lazy Load Angular Modules with the Router

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

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

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

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

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'

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

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.

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 !!

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 !!!

I have the following error: ERROR in Cannot use "in" operator to search for providers. Whats the actual problem ? My settings. angular cli 1.0.0 node 6.10.2 os: win32 @angular 4.1.0 version.

I am getting the same error as Osman, then I do a random save to rerun the server. Then I get this:

Unhandled Promise rejection: No provider for ApplicationRef! ; Zone: <root> ; Task: Promise.then ; Value:

I had the same problem as Osman and Matt. After reading a suggestion from penleychan on GitHub, I made the following changes:

• In app.routes.ts: Replace the export line with export const Routing = RouterModule.forRoot(routes);
• In app.module.ts: Replace the routes import line with import { Routing } from './app.routes';
• Also in app.module.ts: Update the NgModule decorator so that the imports array includes Routing (instead of routes as it previously was)

I’m not sure why Angular CLI works with the named constant export, instead of the default export. Seems like a bug. If anyone has ideas, I would love to learn more.

Right answer is here: https://angular.io/docs/ts/latest/guide/ngmodule.html see the full example (final version)

With Latest version its working fine after making 2 changes to code.

1. remove default from export class ContactsModule{} // it is not able to understand default.
2. in app.routes.ts add #HomeComponent at the end. {path: '', loadChildren: 'app/home/home.module#HomeModule'}