Angular Lazy Loading: Step-by-Step Guide

Lazy loading is a technique used in Angular to defer the loading of modules until they are needed, improving the performance and speed of your application. In this detailed guide, we'll walk through each step of implementing lazy loading in your Angular application, allowing you to convert your existing modules into lazy-loaded ones.

Step 1: Identify Feature Modules

First, identify the feature modules in your Angular application that you want to convert to lazy-loaded modules. Feature modules represent distinct parts of your application, such as dashboard, profile, authentication, etc.

For example, let's say you have a DashboardModule and a ProfileModule that you want to convert to lazy-loaded modules.

Step 2: Create Routing Modules

Next, create separate routing modules for each feature module. Routing modules define the routes for the corresponding feature modules.

Example: Dashboard Routing Module

Example in angular

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

const routes: Routes = [ { 
    path: '', component: DashboardComponent }, 
    // Other child routes for the dashboard module... 
]; 

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

export class DashboardRoutingModule { }

Example: Profile Routing Module

Example in angular

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

const routes: Routes = [ 
    { path: '', component: ProfileComponent }, 
    // Other child routes for the profile module... 
]; 

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

export class ProfileRoutingModule { }

Step 3: Update App Routing Module

In your main AppRoutingModule , configure routes for the lazy-loaded modules using the loadChildren property.

Example in angular

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

const routes: Routes = [ 
    { path: 'dashboard', loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule) }, 
    { path: 'profile', loadChildren: () => import('./profile/profile.module').then(m => m.ProfileModule) }, 
    // Other routes... 
]; 

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

export class AppRoutingModule { }

Step 4: Build and Serve Your Application

Finally, build your Angular application with the Angular CLI, specifying the --prod flag to optimize for production:

Example in angular

ng build --prod

Serve your application as usual:

Example in angular

ng serve

Conclusion

By following these steps, you can easily convert your existing feature modules into lazy-loaded modules in your Angular application. Lazy loading improves performance by loading modules only when they are needed, resulting in faster initial load times and better user experience. Experiment with lazy loading in your Angular projects to create more efficient and scalable applications. Happy coding!