How to Create Lazy Loading in Angular: Simple Guide

In Angular, create lazy loading by defining feature modules and loading them with loadChildren in the routing configuration. This delays loading of modules until the user navigates to their routes, improving app startup speed.

Syntax

Lazy loading in Angular uses the loadChildren property in route definitions to load modules only when needed. The syntax points to the module file and its class name using a dynamic import.

• path: URL path for the route.
• loadChildren: A function that returns a promise importing 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 is loaded only when the user navigates to /feature.

typescript

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

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

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, RouterModule.forRoot(routes)],
  bootstrap: [AppComponent]
})
export class AppModule {}

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

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 displays: 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 module loading.
• Not exporting components or modules properly inside the feature module prevents rendering.
• Trying to lazy load components instead of modules is not supported directly.

typescript

/* Wrong: Using RouterModule.forRoot in feature 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

• Use loadChildren with dynamic import syntax for lazy loading.
• Lazy-loaded modules must use RouterModule.forChild.
• Keep feature modules self-contained with their own routing.
• Lazy loading improves app startup by loading code only when needed.

Key Takeaways

Use loadChildren with dynamic imports in route config to enable lazy loading.

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

Keep feature modules self-contained with their own components and routing.

Lazy loading improves app performance by loading code only when the user navigates to that route.

Avoid common mistakes like using forRoot in lazy modules or incorrect import paths.