Skip to content

Webpack not generating 0.chunk.js for lazy loaded module #2865

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
michaeldevenney opened this issue Oct 24, 2016 · 4 comments
Closed

Webpack not generating 0.chunk.js for lazy loaded module #2865

michaeldevenney opened this issue Oct 24, 2016 · 4 comments

Comments

@michaeldevenney
Copy link

michaeldevenney commented Oct 24, 2016

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 <module.name> 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
Copy link

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
Copy link
Author

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

@filipesilva
Copy link
Contributor

Great investigation work @Destreyf!

@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 6, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants