Lazy Loading and how it is implemented in Angular

Lazy Loading is a technique used to optimize the web applications performance, especially those that have multiple views or components. This approach allows you to load modules and components only when they are needed, reducing application startup time and improving the user experience.

In Angular, Lazy Loading is often applied to modules. The idea is to postpone the module loading until the user navigates to a specific part of the application that requires that module. Here are the basic steps to implement Lazy Loading in Angular.

1. Create a Module for Lazy Loading

Create a separate module for which you want to apply Lazy Loading. This module will contain the components and services that you want to load only when needed.

// my-lazy.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MyLazyComponent } from './my-lazy-component/my-lazy-component.component';

const routes: Routes = [
   { path: '', component: MyLazyComponent }
   // ... other routes if necessary
];

@NgModule({
   declarations: [MyLazyComponent],
   imports: [RouterModule.forChild(routes)],
})
export class MyLazyModule { }

2. Configure the Route for the Lazy Module

In the main routing module (usually "app-routing.module.ts"), configure the route for the Lazy module using the "loadChildren" function. The string provided to "loadChildren" must contain the relative path to the module and the module's class name.

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
   { path: 'lazy', loadChildren: () => import('./my-lazy-module/my-lazy-module.module').then(m => m.MyLazyModule) },
   // ... other routes
];

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

3. Add a Navigation Link

In the component or template where you want to provide a link to the Lazy module, use the "routerLink" directive to create a navigation link.

<!-- Some component or template -->
<a routerLink="/lazy">Go to Lazy Module</a>

4. Consider Using "canLoad"

If you want to avoid loading the Lazy module based on some condition, you can use the "canLoad" route guard. This guard is evaluated before attempting to load the module and allows you to make decisions based on custom logic.

// app-routing.module.ts
import { Injectable } from '@angular/core';
import { CanLoad, Route, UrlSegment } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
   providedIn: 'root',
})
export class MyLazyGuard implements CanLoad {
   canLoad(route: Route, segments: UrlSegment[]): Observable<boolean> | Promise<boolean> | boolean {
     // custom logic to determine if the module can be loaded
     return true; // or false based on logic
   }
}

Add this guard to the route:

// app-routing.module.ts
const routes: Routes = [
   { path: 'lazy', loadChildren: () => import('./my-lazy-module/my-lazy-module.module').then(m => m.MyLazyModule), canLoad: [MyLazyGuard] } ,
   // ... other routes
];

These are the basic steps to implement Lazy Loading in Angular. Angular will automatically take care of module lazy loading when the associated route is accessed for the first time. This technique is especially useful for large applications, improving initial loading speed and enabling a better user experience.