What is Lazy Load in Angular With Example?

Estimated study time: 10 minutes. Load only what the user needs, when they need it.

Lazy loading is a technique where Angular loads a feature module's code only when the user actually navigates to it, instead of bundling everything into the initial download.

Why Lazy Loading Matters

Without it, every feature module — admin panels, reports, settings, all of it — ships in the initial bundle, even if a user never visits most of those sections. That means slower first loads for functionality most visitors won't touch on their first visit.

Setting Up Lazy Loading

Instead of importing a feature module directly in your routing configuration, you point to it using loadChildren with a dynamic import.

const routes: Routes = [
  { path: '', component: HomeComponent },
  {
    path: 'reports',
    loadChildren: () =>
      import('./reports/reports.module').then(m => m.ReportsModule)
  }
];

The Feature Module's Own Routing

const reportRoutes: Routes = [
  { path: '', component: ReportListComponent },
  { path: ':id', component: ReportDetailComponent }
];

@NgModule({
  imports: [RouterModule.forChild(reportRoutes)],
  declarations: [ReportListComponent, ReportDetailComponent]
})
export class ReportsModule {}

Lazy Loading Standalone Components

With standalone components, you can lazy-load a single component directly without a wrapping module.

{
  path: 'settings',
  loadComponent: () =>
    import('./settings/settings.component').then(c => c.SettingsComponent)
}

Verifying It Works

Run a production build and check the output — each lazily loaded module appears as its own separate chunk file, only fetched when its route is visited.

ng build --configuration production