Angular-cli: Webpack not generating 0.chunk.js for lazy loaded module

[michaeldevenney]

Please provide us with the following information:

OS?

Windows 10

Versions.

angular-cli: 1.0.0-beta.18
node: 4.6.0
os: win32 x64
webpack 2.1.0-beta.25 (found in build results)

Repro steps.

• Create a new app following install directions on angular-cli site page.
• Used ng g module to generate 3 modules.
• Used a combination of John Papa's pluralsight and angular.io tutorials to configure routing with one route setup to lazy load.
• At design time ng build & ng serve show no errors.
• At runtime the error listed below is shown in the console when trying to navigate to the lazy loaded route.

At build time, I notice that there is no 0.chunk.js file created. In reading through other issues (#2112) that mention this problem, a solution is often given that says the module must be referenced somewhere else in the application. I have gone through every module and component in the app and can find nothing that is attempting to import my admin.module, which I believe is supported by the error messages below.

The log given by the failure (from Chrome Developer Tools, Console window)

error_handler.js:47
EXCEPTION: Uncaught (in promise): Error: Cannot find module 'app/admin/admin.routing.module'.
Error: Cannot find module 'app/admin/admin.routing.module'.
at webpackEmptyContext (http://localhost:4200/main.bundle.js:44890:8)
at SystemJsNgModuleLoader.loadAndCompile (http://localhost:4200/main.bundle.js:52734:40)
at SystemJsNgModuleLoader.load (http://localhost:4200/main.bundle.js:52727:60)
at RouterConfigLoader.loadModuleFactory (http://localhost:4200/main.bundle.js:17422:128)
at RouterConfigLoader.load (http://localhost:4200/main.bundle.js:17414:81)
at MergeMapSubscriber.project (http://localhost:4200/main.bundle.js:55360:111)
at MergeMapSubscriber._tryNext (http://localhost:4200/main.bundle.js:12064:27)
at MergeMapSubscriber._next (http://localhost:4200/main.bundle.js:12054:18)
at MergeMapSubscriber.Subscriber.next (http://localhost:4200/main.bundle.js:394:18)
at ScalarObservable._subscribe (http://localhost:4200/main.bundle.js:26846:24)

error_handler.js:53
Error: Uncaught (in promise): Error: Cannot find module 'app/admin/admin.routing.module'.
Error: Cannot find module 'app/admin/admin.routing.module'.
at webpackEmptyContext (src async:2)
at SystemJsNgModuleLoader.loadAndCompile (system_js_ng_module_factory_loader.js:45)
at SystemJsNgModuleLoader.load (system_js_ng_module_factory_loader.js:38)
at RouterConfigLoader.loadModuleFactory (router_config_loader.js:40)
at RouterConfigLoader.load (router_config_loader.js:32)
at MergeMapSubscriber.project (apply_redirects.js:215)
at MergeMapSubscriber._tryNext (mergeMap.js:110)
at MergeMapSubscriber._next (mergeMap.js:100)
at MergeMapSubscriber.Subscriber.next (Subscriber.js:89)
at ScalarObservable._subscribe (ScalarObservable.js:49)
at resolvePromise (zone.js:468)
at zone.js:445
at ZoneDelegate.invoke (zone.js:232)
at Object.onInvoke (ng_zone_impl.js:43)
at ZoneDelegate.invoke (zone.js:231)
at Zone.run (zone.js:114)
at zone.js:502
at ZoneDelegate.invokeTask (zone.js:265)
at Object.onInvokeTask (ng_zone_impl.js:34)
at ZoneDelegate.invokeTask (zone.js:264)

zone.js:388
Unhandled Promise rejection: Cannot find module 'app/admin/admin.routing.module'. ; Zone: angular ; Task: Promise.then ; Value: Error: Cannot find module 'app/admin/admin.routing.module'.(…) Error: Cannot find module 'app/admin/admin.routing.module'.
at webpackEmptyContext (http://localhost:4200/main.bundle.js:44890:8)
at SystemJsNgModuleLoader.loadAndCompile (http://localhost:4200/main.bundle.js:52734:40)
at SystemJsNgModuleLoader.load (http://localhost:4200/main.bundle.js:52727:60)
at RouterConfigLoader.loadModuleFactory (http://localhost:4200/main.bundle.js:17422:128)
at RouterConfigLoader.load (http://localhost:4200/main.bundle.js:17414:81)
at MergeMapSubscriber.project (http://localhost:4200/main.bundle.js:55360:111)
at MergeMapSubscriber._tryNext (http://localhost:4200/main.bundle.js:12064:27)
at MergeMapSubscriber._next (http://localhost:4200/main.bundle.js:12054:18)
at MergeMapSubscriber.Subscriber.next (http://localhost:4200/main.bundle.js:394:18)
at ScalarObservable._subscribe (http://localhost:4200/main.bundle.js:26846:24)

zone.js:390
Error: Uncaught (in promise): Error: Cannot find module 'app/admin/admin.routing.module'.(…)consoleError @ zone.js:390_loop_1 @ zone.js:417drainMicroTaskQueue @ zone.js:421ZoneTask.invoke @ zone.js:339

Mention any other details that might be useful.

I have tried all the advice from Issue #2112, but wasn't successful. I zipped and attached my project (minus the node_modules, of course). Any guidance you can provide would be appreciated, thanks!
NotLazyLoading.zip

[Destreyf]

So i made a few edits to the files, in your app-routing.module.ts you specified "AdminRoutingModule" and were linking to the admin-routing.module file instead of AdminModule and admin.module, this appears to have made it work for me, but note that you have to restart your ng serve process because it won't pickup the module until after you restart ng serve.

Also i noticed you marked this as angular-cli beta 18, but the package.json's devDependencies says beta 17, not that it should have impacted much, but just worth noting.

Also you should be able to safely upgrade all your angular 2.0.0 references in the package.json to angular 2.1.1 (latest release) but it shouldn't impact any of the lazy loading to my knoweldge.

[michaeldevenney]

That was it! After staring at the files for so long I was missing the forest for the trees... Really appreciate your help!

[filipesilva]

Great investigation work @Destreyf!

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}