What is Lazy Loading in Angular

Lazy loading in Angular is a performance optimization technique where modules are loaded only when they are needed, instead of loading the entire application upfront.

What is Lazy Loading?

In a normal Angular app, everything is bundled into one large file and loaded at startup (called eager loading).

With lazy loading, Angular splits the app into multiple bundles, and loads a module only when the user navigates to its route.

Simple Example

Imagine your app has:

Login Module
Dashboard Module
Admin Module

With lazy loading:

Initially → only Login module loads
When user goes to /dashboard → Dashboard module loads
When user goes to /admin → Admin module loads

How Lazy Loading Works in Angular

Lazy loading is implemented using Angular Routing with loadChildren.

Example:

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

Here:

admin.module is not loaded initially
It loads only when /admin route is accessed

Steps to Implement Lazy Loading

Create a module:

ng generate module admin --route admin --module app.module

Angular automatically:

Creates a routing module
Adds loadChildren in main routing

Benefits (Important for Interviews)

1. Faster Initial Load

Only required modules are loaded first
Reduces bundle size

2. Better Performance

Improves page load time
Especially useful for large applications

3. Efficient Resource Usage

Loads code only when needed

4. Improves User Experience

Faster startup → better UX

Disadvantages

Slight delay when loading a lazy module for the first time
More complex routing structure

Lazy Loading vs Eager Loading

Feature	Lazy Loading	Eager Loading
Load Time	On demand	At startup
Initial Bundle Size	Smaller	Larger
Performance	Better for large apps	OK for small apps
Use Case	Feature modules	Core modules

Best Practices

Use lazy loading for:
- Feature modules (Admin, Reports, Dashboard)
Do NOT lazy load:
- Core modules (Auth, Shared services)
Combine with Preloading Strategy if needed

Advanced Concept

Angular provides Preloading Strategies:

PreloadAllModules

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

This loads lazy modules in the background after app loads.

Interview Summary

Lazy loading in Angular is a technique where feature modules are loaded only when their routes are accessed, instead of loading everything at once. It improves performance by reducing initial bundle size and speeds up application load time.

Lazy loading is easy to talk about in theory—but in interviews, what really stands out is whether you can actually implement it cleanly. Let’s go step by step in a practical, interview-ready way.

How to Implement Lazy Loading in Angular

Step 1: Create a Feature Module

You typically lazy load feature modules, not components directly.

ng generate module admin --route admin --module app.module

This command does 3 things automatically:

Creates admin.module.ts
Creates admin-routing.module.ts
Updates app-routing.module.ts with lazy loading

Step 2: Configure Lazy Route (Core Step)

If doing manually, add this in your main routing file:

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

Key Points:

loadChildren → enables lazy loading
import() → dynamic import (code splitting happens here)
Module loads only when /admin is visited

Step 3: Define Routes Inside Feature Module

Inside admin-routing.module.ts:

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

Important:

Use empty path '' because /admin is already defined in parent

Step 4: Ensure Module Structure is Correct

admin.module.ts

@NgModule({
  declarations: [AdminComponent],
  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ]
})
export class AdminModule {}

Use:

RouterModule.forChild() (NOT forRoot())

Step 5: Verify Lazy Loading Works

Run app and open browser DevTools → Network tab:

Initially → admin bundle NOT loaded
Navigate to /admin → new JS chunk loads

Important Interview Concepts

1. Why `forChild()`?

forRoot() → used only once (main app)
forChild() → used in lazy modules

Interview trick question ⚠️

2. How Angular Splits Code?

Webpack creates separate chunks
Each lazy module becomes a separate bundle

3. Can We Lazy Load Components Directly?

Yes (Angular 14+ with standalone components):

{
  path: 'admin',
  loadComponent: () =>
    import('./admin/admin.component').then(c => c.AdminComponent)
}

Step 6: Optional – Preloading Strategy

To avoid delay on first load:

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

Loads lazy modules in background

Real Project Structure (Interview Gold)

app/
 ├── core/          (eager loaded)
 ├── shared/        (reusable)
 ├── features/
 │    ├── admin/    (lazy)
 │    ├── dashboard/ (lazy)
 │    └── reports/  (lazy)

Common Mistakes (Very Important)

❌ Importing lazy module in AppModule
❌ Using forRoot() in feature module
❌ Incorrect path in loadChildren
❌ Forgetting routing module

Interview Answer

Lazy loading in Angular is implemented using the Angular Router by configuring routes with loadChildren, which dynamically imports feature modules. When a user navigates to that route, Angular loads the module on demand, reducing initial bundle size and improving performance. Inside the lazy module, routes are defined using RouterModule.forChild().