Lazy loading in Angular2 RC7 and angular-cli webpack

[stephenwilson1984]

Please provide us with the following information:

1. OS? Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)
   Windows 7

2. Versions. Please run ng --version. If there's nothing outputted, please run
   in a Terminal: node --version and paste the result here:
   angular-cli: 1.0.0-beta.11-webpack.9-4
   node: 6.5.0
   os: win32 x64

3. Repro steps. Was this an app that wasn't created using the CLI? What change did you
   do on your code? etc.
   Created a boilerplate app using "ng new" then added a basic home module manually.

4. The log given by the failure. Normally this include a stack trace and some
   more information.
   error_handler.js:45EXCEPTION: Uncaught (in promise): Error: Cannot find module '/app/home.module'.ErrorHandler.handleError @ error_handler.js:45next @ application_ref.js:273schedulerFn @ async.js:82SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:74onError @ ng_zone.js:120onHandleError @ ng_zone_impl.js:64ZoneDelegate.handleError @ zone.js:196Zone.runGuarded @ zone.js:102_loop_1 @ zone.js:368drainMicroTaskQueue @ zone.js:375
   error_handler.js:50ORIGINAL STACKTRACE:ErrorHandler.handleError @ error_handler.js:50next @ application_ref.js:273schedulerFn @ async.js:82SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:74onError @ ng_zone.js:120onHandleError @ ng_zone_impl.js:64ZoneDelegate.handleError @ zone.js:196Zone.runGuarded @ zone.js:102_loop_1 @ zone.js:368drainMicroTaskQueue @ zone.js:375
   error_handler.js:51Error: Uncaught (in promise): Error: Cannot find module '/app/home.module'.
   at resolvePromise (zone.js:418)
   at zone.js:395
   at ZoneDelegate.invoke (zone.js:192)
   at Object.onInvoke (ng_zone_impl.js:43)
   at ZoneDelegate.invoke (zone.js:191)
   at Zone.run (zone.js:85)
   at zone.js:451
   at ZoneDelegate.invokeTask (zone.js:225)
   at Object.onInvokeTask (ng_zone_impl.js:34)
   at ZoneDelegate.invokeTask (zone.js:224)ErrorHandler.handleError @ error_handler.js:51next @ application_ref.js:273schedulerFn @ async.js:82SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:74onError @ ng_zone.js:120onHandleError @ ng_zone_impl.js:64ZoneDelegate.handleError @ zone.js:196Zone.runGuarded @ zone.js:102_loop_1 @ zone.js:368drainMicroTaskQueue @ zone.js:375
   zone.js:344Unhandled Promise rejection: Cannot find module '/app/home.module'. ; Zone: angular ; Task: Promise.then ; Value: Error: Cannot find module '/app/home.module'.(…) Error: Cannot find module '/app/home.module'.
   at webpackEmptyContext (http://localhost:4200/main.bundle.js:41545:8)
   at SystemJsNgModuleLoader.loadAndCompile (http://localhost:4200/main.bundle.js:50064:40)
   at SystemJsNgModuleLoader.load (http://localhost:4200/main.bundle.js:50057:60)
   at RouterConfigLoader.loadModuleFactory (http://localhost:4200/main.bundle.js:16894:128)
   at RouterConfigLoader.load (http://localhost:4200/main.bundle.js:16886:81)
   at MergeMapSubscriber.project (http://localhost:4200/main.bundle.js:52671:111)
   at MergeMapSubscriber._tryNext (http://localhost:4200/main.bundle.js:25798:27)
   at MergeMapSubscriber._next (http://localhost:4200/main.bundle.js:25788:18)
   at MergeMapSubscriber.Subscriber.next (http://localhost:4200/main.bundle.js:5728:18)
   at ScalarObservable._subscribe (http://localhost:4200/main.bundle.js:40540:24)consoleError @ zone.js:344_loop_1 @ zone.js:371drainMicroTaskQueue @ zone.js:375
   zone.js:346Error: Uncaught (in promise): Error: Cannot find module '/app/home.module'.(…)

5. Mention any other details that might be useful.
   Also a question raised on StackOverflow with more details: http://stackoverflow.com/q/39493782/616304

   ---

   Thanks! We'll be in touch soon.

[slubowsky]

Try killing and restarting ng serve. Worked for me, see #2033

[mjolk]

yep it works, gj!

[ritz078]

@slubowsky @mjolk is there any way i can change the name of generated chunks that you know ? my chunks are named 0.chunk.js, 1.chunk.js and so on.

[mjolk]

@ritz078 normally this is easy to do in webpack config but in this case this config is entirely managed by angular-cli... if needs must you could edit https://github.com/angular/angular-cli/blob/4c4e31d44c7b17078ebac6f4689db11c47285661/packages/angular-cli/models/webpack-build-development.ts#L10 and https://github.com/angular/angular-cli/blob/4c4e31d44c7b17078ebac6f4689db11c47285661/packages/angular-cli/models/webpack-build-production.ts#L14

[ritz078]

that's definitely not a solution. will create a separate issue.

[stephenwilson1984]

Nothing has worked for me. Killing and restarting ng serve has no effect. I've seen another post exactly the same as this on stack overflow so I'm not the only one getting this. One person has suggested the below:

"The mechanism you are using is still systemjs based. I couldn't make it work with webpack using the "path#class" syntax. So we require the module directly:

First we'll need the es6-promise-loader:

npm i --save-dev es6-promise-loader

Then define your route like this:

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

I'm not sure about this though. I would have thought the lazy loading that used to work with System JS should work the same in webpack with no extra config. Am I wrong?

[marklagendijk]

I just got it working. Restarting ng serve worked for me.
Make sure you are using the full path, so app/my-lazy-module/my-lazy-module.module#MyLazyModule instead of ./app/my-lazy-module/my-lazy-module.module#MyLazyModule. The relative syntax does not (yet?) work.

[mxii]

Isn't it possible to lazy load just a Component instead of a whole NgModule?

[andyrue]

With the latest beta.14 and Angular 2.0.0 Final I used app/home/home.module without specifying the module class to load with #HomeModule.

[chosroes]

Maybe it's better to follow the documentation style:
https://angular.io/docs/ts/latest/guide/router.html

const adminRoutes: Routes = [ { path: 'admin', loadChildren: 'app/admin/admin.module#AdminModule', } ];

[andyrue]

@chosroes That's how I was originally doing it but it could never find the module file. Removing the #HomeModule part got it working. Confusing!

[reflog]

One thing that failed me at first: make sure that the class inside your module is NOT exported as 'default', otherwise it will not be picked up by systemJS loader!

[andyrue]

@reflog Thanks for pointing that out. After removing default from my exported class I was then able to use app/home/home.module#HomeModule method. Seems that's the documented way to do things now. But note that the other way appears to work as well if you export default and don't specify the module class in the path.

[chosroes]

@andyrue Yeah, default means that you have not to specify the module.

[PostImpatica]

Are you guys seeing it actually create additional bundles? Cuz although this appears to be working, in that I'm not getting any errors, it doesn't appear to be creating separate bundles. Therefore, nothing is really being lazy loaded when you look at the network tab.

UPDATE: Never mind, I had to remove the module from the main app.module.ts and now it loads as a seperate chunk. I was surprised this worked, lol.