How to Fix Lazy Loaded Module Error in Angular

To fix a lazy loaded module error in Angular, ensure the module path and class name in the loadChildren property are correct and use the dynamic import syntax. Also, confirm the lazy module has its own NgModule with a proper routing setup.

Why This Happens

This error usually happens because Angular cannot find the module you want to lazy load. This can be due to incorrect path, wrong module class name, or using old syntax for loadChildren. Angular expects a dynamic import that returns the module class.

typescript

const routes: Routes = [
  {
    path: 'feature',
    loadChildren: './feature/feature.module#FeatureModule'
  }
];

Output

Error: Cannot find module './feature/feature.module' or its corresponding type declarations.

The Fix

Update the loadChildren to use the dynamic import syntax with a function that returns a promise. Make sure the path is correct and the module class name matches exactly.

typescript

const routes: Routes = [
  {
    path: 'feature',
    loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule)
  }
];

Output

The lazy loaded module loads correctly without errors when navigating to '/feature'.

Prevention

Always use the dynamic import syntax for lazy loading modules in Angular (Angular 8+). Double-check module paths and class names. Use Angular CLI to generate modules and routes to avoid typos. Enable strict type checking and linting rules to catch errors early.

Related Errors

• Module not found: Check if the module file exists and path is correct.
• Cannot read property 'then' of undefined: Usually caused by missing the arrow function in loadChildren.
• Unexpected token import: Happens if your build setup does not support dynamic imports.

Key Takeaways

Use dynamic import syntax with arrow function for lazy loading modules.

Verify the module path and class name exactly match the file and exported class.

Generate modules and routes with Angular CLI to reduce errors.

Enable strict linting and type checking to catch mistakes early.

Check build configuration supports dynamic imports.