How to Lazy Load Module in Angular: Simple Guide

In Angular, you lazy load a module by using the loadChildren property in your routing configuration with a dynamic import. This tells Angular to load the module only when the user navigates to its route, improving app startup speed.

Syntax

Use the loadChildren property in your route object with a dynamic import that returns the module class. This syntax tells Angular to load the module only when the route is accessed.

• path: The URL path for the route.
• loadChildren: A function that dynamically imports the module file and returns the module class.

typescript

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

Example

This example shows how to lazy load a FeatureModule when the user navigates to the /feature path. The module is only loaded on demand, reducing the initial bundle size.

typescript

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

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

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

// feature.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FeatureComponent } from './feature.component';
import { RouterModule } from '@angular/router';

@NgModule({
  declarations: [FeatureComponent],
  imports: [CommonModule, RouterModule.forChild([{ path: '', component: FeatureComponent }])]
})
export class FeatureModule {}

// feature.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-feature',
  template: '<h2>Feature Module Loaded Lazily!</h2>'
})
export class FeatureComponent {}

Output

When navigating to '/feature', the page shows: Feature Module Loaded Lazily!

Common Pitfalls

Common mistakes when lazy loading modules include:

• Using a string syntax for loadChildren which is deprecated. Always use dynamic imports.
• Not exporting the module class properly from the module file.
• Forgetting to configure child routes inside the lazy-loaded module with RouterModule.forChild().
• Not adding the lazy-loaded module to imports in AppModule (it should NOT be imported there).

typescript

/* Wrong (deprecated string syntax): */
const routes = [
  { path: 'feature', loadChildren: './feature/feature.module#FeatureModule' }
];

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

Quick Reference

Tips for lazy loading modules in Angular:

• Use dynamic imports with loadChildren for lazy loading.
• Define routes inside lazy modules with RouterModule.forChild().
• Do not import lazy modules in AppModule.
• Lazy loading improves app startup time by splitting code.

Key Takeaways

Use dynamic import syntax with loadChildren to lazy load Angular modules.

Lazy-loaded modules must define their own routes with RouterModule.forChild().

Do not import lazy-loaded modules in the main AppModule to avoid eager loading.

Lazy loading reduces initial bundle size and speeds up app startup.

Avoid deprecated string syntax for loadChildren; always use the modern dynamic import.