Chapter 6.4☕ 16 min read

Lazy Loading

Load components and modules only when the user navigates to them — faster initial load, smaller bundles.

01What is Lazy Loading

Lazy loading means loading code ONLY when the user navigates to that route. The opposite is eager loading (everything loads at app start).

"Lazy = aalas mein uthna — jab zarurat ho tab uthta hai."

"Eager = subah 5 baje uthna — chahe kaam ho ya na ho."

With lazy loading, Angular splits your code into separate JavaScript bundles (chunks). The initial bundle is small — only what's needed for the first page. Additional chunks download on demand as the user navigates.

02Why Lazy Loading Matters

Lazy loading dramatically improves initial load time and Core Web Vitals.

Eager loaded app (50 components): 5MB initial bundle — user waits for everything to download before seeing anything
Lazy loaded app: 500KB initial chunk, rest downloads on demand — user sees first page in 1-2 seconds

"Hyderabad mein 40°C hai — chota bundle = kam loading time = kam garmi."

Better user experience: faster Time to Interactive (TTI), better Largest Contentful Paint (LCP), lower bounce rate. Better SEO because search engines see faster pages.

03loadComponent — New Way (Angular 16+)

loadComponent (Angular 16+) lets you lazy load a single standalone component without any module.

// app.routes.ts
const routes: Routes = [{
  path: 'admin',
  loadComponent: () => import('./admin/admin.component')
    .then(m => m.AdminComponent)
}];

The component MUST be standalone (standalone: true). Angular creates a separate chunk for this component that downloads only when /admin is visited.

"loadComponent = on-demand delivery — jab order karo tab banao."

Before Angular 16, you had to create an entire NgModule just to lazy load a single component. loadComponent eliminates that boilerplate.

04loadChildren — Lazy Loading Child Routes

loadChildren lazy loads an entire set of child routes at once.

// app.routes.ts
const routes: Routes = [{
  path: 'dashboard',
  loadChildren: () => import('./dashboard/dashboard.routes')
    .then(m => m.DASHBOARD_ROUTES)
}];

// dashboard.routes.ts
import { Routes } from '@angular/router';
import { OrdersComponent } from './orders.component';
import { ProfileComponent } from './profile.component';

export const DASHBOARD_ROUTES: Routes = [
  { path: '', component: DashboardHomeComponent },
  { path: 'orders', component: OrdersComponent },
  { path: 'profile', component: ProfileComponent },
];

"loadChildren = poora family ek saath aata hai — ek bhi bulao toh sab aate hain."

All child routes are in the same chunk. When user visits /dashboard, the entire dashboard chunk downloads with all its child components.

05Preloading Strategies

By default, lazy chunks load ONLY when navigated. Preloading changes this — it downloads lazy chunks in the background AFTER the initial bundle, so when the user clicks, it's instant.

// Preload ALL lazy chunks after initial load
provideRouter(routes, withPreloading(PreloadAllModules))

// Custom preloading — specify which routes to preload
provideRouter(routes, withPreloading(customPreloadStrategy))

"Preloading = smart aalas — pehle important kaam, baaki background mein load karo."

Recommended approach: Use PreloadAllModules for most apps. The initial bundle loads fast, then all other chunks preload silently in the background before the user clicks.

Key Takeaways

✅ Lazy loading loads code only when user navigates to that route (faster initial load)
✅ loadComponent lazy loads a single standalone component (Angular 16+, no module needed)
✅ loadChildren lazy loads an entire set of child routes in one chunk
✅ Preloading (withPreloading) downloads lazy chunks in background after initial load
✅ Services remain in root bundle — only components and templates are lazy loaded

Previous6.3 — Child Routes 📋 All Chapters Next Chapter6.5 — Route Guards →