Practice Questions

What is lazy loading in Angular?

LowIntermediateAngular

By FrontendAtlas Team · Updated Jan 30, 2026

Preparing for interviews?

Use guided tracks for structured prep, then practice company-specific question sets when you want targeted interview coverage.

Explore interview tracks Browse company questions Open Angular prep path

Quick Answer

Lazy loading in Angular is a technique that loads feature modules only when they are needed, rather than at application startup. It improves performance by reducing the initial bundle size and speeding up the first load.

Answer

Overview

Lazy loading in Angular is an optimization strategy that helps improve performance by loading specific parts of the application only when required. Instead of downloading all modules and components when the app starts, Angular fetches feature modules on demand — typically when the user navigates to a particular route.

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.