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

2019-10-28 · 1 min

A quick post on an error I hit while opting into the Ivy compiler, due in November 2019.

Once you get past the initial errors, you may see this in the console:

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)

Angular 8 introduced a new recommended way to load modules. Previously, lazy loaded modules were specified as a string path:

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

The Angular toolchain performed some wizardry to parse that string and load the module from loadChildren.

Since Angular 8, modules are loaded with the standard dynamic import instead, and Ivy relies on it. Change the route to:

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

Depending on your IDE, you'll likely get IntelliSense for it too: