? Lazy Loading Modules

? Quick Overview

Lazy loading in Angular lets you load feature modules only when their routes are visited, instead of loading everything at application startup. This reduces the initial bundle size and makes your app feel faster, especially for large projects with many features.

? Key Concepts

• Feature Module – A separate Angular module that groups related components, pipes and services.
• Lazy Loading – Defers loading of a feature module until its route is activated.
• RouterModule.forChild() – Used inside feature modules for their own routing configuration.
• loadChildren – A route property in the root routing module that points to the lazily loaded module.
• Route-Based Code Splitting – Angular CLI automatically splits bundles so each lazy module is loaded on demand.

? Syntax & Theory

To use lazy loading, you typically:

1. Create a feature module (for example, ProductsModule).
2. Configure its internal routes using RouterModule.forChild().
3. Configure the main app routes with a loadChildren property that points to this module.
4. Navigate to the lazy route, causing Angular to dynamically load the module bundle.

The lazy-loaded module is only requested when the user hits a specific route such as /products, which keeps the initial load light and improves perceived performance.

? Code Example 1 – Creating a Feature Module

products.module.ts

// Feature module with its own routing
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ProductsComponent } from './products.component';
import { RouterModule, Routes } from '@angular/router';

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

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

? Code Example 2 – Configuring Lazy Loading in App Routing

app-routing.module.ts

// Root routing configuration with lazy loading
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)
  }
];

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