Lazy Loading in Angular

🚀 What is Lazy Loading?

• Lazy Loading means loading modules only when needed, not when the app starts.
• It helps improve the initial load time of your Angular app.

---

📁 1. Create a Feature Module

Suppose you want to lazy-load a ProductsModule.

Generate a module and a component:

ng generate module products --route products --module app.module
ng generate component products/products-list

or manually:

ng generate module products
ng generate component products/products-list

Inside products-routing.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ProductsListComponent } from './products-list/products-list.component';

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

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

Inside products.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ProductsListComponent } from './products-list/products-list.component';
import { ProductsRoutingModule } from './products-routing.module';

@NgModule({
  declarations: [ProductsListComponent],
  imports: [
    CommonModule,
    ProductsRoutingModule
  ]
})
export class ProductsModule { }

---

📄 2. Set Up Lazy Loading in App Routing

In app-routing.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

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

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

✅ Key Point:

• loadChildren uses dynamic import (import()).
• The ProductsModule will only load when the user navigates to /products.

---

📦 3. Folder Structure Overview

/src
  /app
    /products
      /products-list
        products-list.component.ts/html/css
      products-routing.module.ts
      products.module.ts
    app-routing.module.ts
    app.module.ts

---

🎯 Quick Tips

Tip	Description
Eager Loading	Module loads immediately with the app.
Lazy Loading	Module loads only when route is accessed.
Preloading	You can preload lazy modules after app startup for faster navigation (optional).

---

⚡ Why Use Lazy Loading?

• Faster initial app load ⏩
• Splits large apps into smaller bundles 📦
• Loads only what is needed when needed 🎯