Lazy loading is an Angular design pattern that loads modules only when they are required, keeping the initial bundle size smaller and improving render time. It works by configuring routes that load child modules lazily using loadChildren, so modules are only loaded on demand instead of all at once on app start. This document provides steps to implement lazy loading in an Angular application by generating modules, configuring child routes and routes that lazily load modules.

1. What is Lazy Loading?
- Eager Loading
- Lazy Loading
- All angular modules "NgModules" are eagerly loaded.
- Modules are loaded along with application.
- It makes application heavy on browser.
- It makes page rendering slow.
- Even you are not using specific module, it is loaded into memory.
- Lazy Loading is a design pattern
- Lazy loading allows to load NgModules only when they are required.
- It keeps initial bundle size smaller
- It improves render time. It decreases the page load time.
- It is more light weight.
Ex:
1. Create a new Application with Routing Enabled
- Open your workspace
- Create a new Application with routing
> ng generate application Amazon --routing
2. Create Modules for your application
- Open your "app" folder in terminal
- Generate modules with individual route
> ng g module vendors --route vendors --module app.module
> ng g module customers --route customers --module app.module
3. Every module comprises of following files
-customers-routing.module.ts [child routes]
-customers.module.ts [child modules registration]
-customers.component.ts
-customers.component.html
-customers.component.css
- customers-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CategoriesComponent } from './categories.component';
const routes: Routes = [{ path: '', component: CategoriesComponent }];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class CategoriesRoutingModule { }
4. app-routing.module.ts

2. import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{ path: 'categories', loadChildren: () => import('./categories/categories.module').then(m =>
m.CategoriesModule)},
{ path: 'vendors', loadChildren: () => import('./vendors/vendors.module').then(m =>
m.VendorsModule) },
{ path: 'products', loadChildren: () => import('./products/products.module').then(m =>
m.ProductsModule) }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
4. Create Navigation from "app.component.html"
<h2>Amazon Portal</h2>
<div>
<button routerLink="">Home</button>
<button routerLink="/categories">Categories</button>
<button routerLink="/vendors">Vendors</button>
<button routerLink="/products">Products</button>
</div>
<div style="margin-top: 30px;">
<router-outlet></router-outlet>
</div>