Angular Lazy Loading Modules with Ivy – Uncaught (in promise) error cannot find module

There’s CSS methodologies to help use write such as SMACSS or Atomic, one we’re going to look at today is Block Element Module

This is a quick post on an error I encountered whilst opting into the Ivy compiler (which should be here Nov 2019).

Once you get through the initial errors, you may see the below in your console log:

core.js:6014 ERROR Error: Uncaught (in promise): Error: Cannot find module 'src/app/modules/module/your-module.module'
Error: Cannot find module 'src/app/modules/module/your-module.module'
    at $_lazy_route_resource lazy namespace object:5
    at ZoneDelegate.invoke (zone-evergreen.js:365)
    at Object.onInvoke (core.js:39707)
    at ZoneDelegate.invoke (zone-evergreen.js:364)
    at Zone.run (zone-evergreen.js:124)
    at zone-evergreen.js:851
    at ZoneDelegate.invokeTask (zone-evergreen.js:400)
    at Object.onInvokeTask (core.js:39688)
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Zone.runTask (zone-evergreen.js:168)
    at resolvePromise (zone-evergreen.js:793)
    at resolvePromise (zone-evergreen.js:752)
    at zone-evergreen.js:854
    at ZoneDelegate.invokeTask (zone-evergreen.js:400)
    at Object.onInvokeTask (core.js:39688)
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Zone.runTask (zone-evergreen.js:168)
    at drainMicroTaskQueue (zone-evergreen.js:570)
    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:485)
    at invokeTask (zone-evergreen.js:1596)

You’re getting this error due to Angular 8 introduced a new recommended module loading method, previously the default method of lazy loading modules was to specify a string path to a module:

{path: '/admin', loadChildren: './admin/admin.module#AdminModule'}

This was something built into the Angular toolchain, and performed some wizardry to parse and load the module from the loadChildren attribute.

Since Angular 8, the method of importing modules has changed to the industry recognised / standard, dynamic import. So your import should now be changed to:

loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)

Depending upon your IDE choice, you’ll likely also get Intellisense too:

Ash Grennan
Ash Grennan
Snr Software Engineer

Deliver value first, empower teams to make technical decisions. Snr Engineer @ Moonpig, hold a BSc & MSc in software engineering & certified AWS Solutions Architect (LinkedIn). A fan of Serverless computing, distributed systems, and anything published by serverless.com 🧡

Related