What is lazy loading in Angular?

HighIntermediateAngular

By FrontendAtlas Team · Updated Apr 4, 2026

Quick Answer

Angular lazy loading is a route-boundary and bundle-trade-off decision, not just “load later.” The useful angle is production routing: initial bundle relief, preloading strategy, and the pitfalls of fragmenting features too aggressively.

Answer

Performance trade-off

Lazy loading is not just “load modules later.” In production Angular apps, it is a route-boundary decision: keep rarely used features out of the startup bundle, then choose whether background preloading is worth the extra network work. The main pitfall is over-fragmenting features and turning navigation into a chunk waterfall.

How It Works
By default, Angular eagerly loads all modules at startup. With lazy loading, feature modules are split into separate chunks, and Angular loads them only when their routes are accessed. This reduces the initial load time and makes the application faster and more efficient.

TYPESCRIPT

// Example: Setting up lazy loading in app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

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

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

In this example, the home and products feature modules are not loaded until the user navigates to their respective routes. Each module is fetched dynamically using the loadChildren property.

Creating a Lazy-Loaded Module
Use the Angular CLI to generate a module with routing configured for lazy loading:
ng generate module products --route products --module app.module

TYPESCRIPT

// Example: products-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ProductListComponent } from './product-list/product-list.component';

const routes: Routes = [
  { path: '', component: ProductListComponent }
];

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

Benefits of Lazy Loading

Reduces initial bundle size for faster application startup.
Improves overall app performance by loading only necessary modules.
Enhances scalability — new modules can be added easily without affecting initial load time.
Better user experience on slower networks or large applications.

Eager Loading vs Lazy Loading

Feature	Eager Loading	Lazy Loading
When Loaded	All modules loaded at startup.	Modules loaded on demand when needed.
Performance	Slower initial load, faster subsequent navigation.	Faster initial load, modules loaded asynchronously.
Use Case	Small or simple applications.	Large-scale or modular applications.

Comparison between Eager and Lazy Loading

Preloading Strategy
Angular also provides a hybrid approach called preloading, where lazily loaded modules are fetched in the background after the app loads. You can enable it using the PreloadAllModules strategy:

TYPESCRIPT

import { PreloadAllModules, RouterModule } from '@angular/router';

RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules });

Think of lazy loading as packing your app into ‘mini-bundles’ — instead of loading everything upfront, Angular loads each bundle only when the user needs it.

Summary

Lazy loading defers loading feature modules until needed.
Improves performance by reducing the initial bundle size.
Configured via loadChildren in the routing module.
Ideal for large, modular, and enterprise-level applications.