How to Use Lazy Loading for Performance in Angular

In Angular, use loadChildren in your routing configuration to lazy load feature modules only when their routes are accessed. This reduces the initial bundle size and speeds up app startup by loading code on demand.

Syntax

Lazy loading in Angular is set up in the routing module using the loadChildren property. It points to the module file and its class using a dynamic import syntax.

• path: URL path for the route.
• loadChildren: A function that dynamically imports the module.

typescript

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

Example

This example shows an Angular app with a lazy loaded FeatureModule. The module loads only when the user navigates to /feature, improving initial load time.

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: 'home',
    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, Routes } from '@angular/router';

const featureRoutes: Routes = [
  { path: '', component: FeatureComponent }
];

@NgModule({
  declarations: [FeatureComponent],
  imports: [CommonModule, RouterModule.forChild(featureRoutes)]
})
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

• Forgetting to use RouterModule.forChild in the lazy loaded module causes routing errors.
• Using relative paths incorrectly in loadChildren can break lazy loading.
• Not exporting components or modules properly can prevent the feature from loading.
• Trying to lazy load components instead of modules is not supported directly.

typescript

/* Wrong: Using RouterModule.forRoot in lazy module */
@NgModule({
  imports: [RouterModule.forRoot(featureRoutes)] // Wrong for lazy loaded module
})
export class FeatureModule {}

/* Right: Use RouterModule.forChild */
@NgModule({
  imports: [RouterModule.forChild(featureRoutes)]
})
export class FeatureModule {}

Quick Reference

Lazy loading helps improve Angular app performance by loading feature modules only when needed. Use loadChildren with dynamic imports in your routes. Always use RouterModule.forChild in lazy modules and check paths carefully.

Concept	Description
loadChildren	Function that dynamically imports a module for lazy loading
RouterModule.forChild	Used in lazy loaded modules to register routes
Path	URL segment that triggers lazy loading
FeatureModule	Module loaded lazily to reduce initial bundle size

Key Takeaways

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

Lazy loaded modules must use RouterModule.forChild for their routes.

Lazy loading reduces initial app load time by splitting code into chunks.

Check import paths carefully to avoid routing errors.

Lazy loading works at the module level, not individual components.