Lazy Loading Routes in Angular: A Comprehensive Guide

Welcome to our tutorial on Lazy Loading Routes in Angular! In this lesson, we'll learn how to optimize your Angular applications by loading modules only when needed, improving load times and user experience.

What is Lazy Loading? 💡

Lazy loading is a technique used to delay the loading of non-essential parts of a web application, allowing the user to interact with the essential parts immediately. In Angular, we can apply this concept to routes, improving the initial load time by only loading the necessary modules when the user navigates to that specific route.

Setting Up Lazy Loading Routes

Step 1: Create a Lazy-Loaded Module

First, we need to create a new Angular module that will be lazy-loaded. Create a new folder named lazy-module inside the app folder. Inside lazy-module, create a new folder called lazy-module.module.

bash

- app
  - lazy-module
    - lazy-module.module

Step 2: Configure the Lazy-Loaded Module

Inside lazy-module.module, we'll declare the module and import the components that will be lazy-loaded.

typescript

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LazyComponent } from './lazy.component';

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

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

Step 3: Add the Lazy-Loaded Module to the App Module

Next, we'll add our lazy-loaded module to the main AppModule.

typescript

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { LazyModuleModule } from './lazy-module/lazy-module.module';

@NgModule({
  imports: [
    RouterModule.forRoot([
      // other routes...
      {
        loadChildren: () => import('./lazy-module/lazy-module.module').then(m => m.LazyModuleModule),
      },
    ]),
    LazyModuleModule,
  ],
  declarations: [],
})
export class AppModule { }

Creating a Lazy-Loaded Component

Now let's create a simple component that will be lazy-loaded.

bash

- app
  - lazy-module
    - lazy.component.ts
    - lazy.component.html

In lazy.component.ts, declare the component and add a constructor that logs a message to the console when the component is initialized.

typescript

import { Component } from '@angular/core';

@Component({
  selector: 'app-lazy',
  template: `
    <h1>Welcome to the Lazy Component!</h1>
  `,
})
export class LazyComponent {
  constructor() {
    console.log('Lazy component initialized!');
  }
}

Practical Example

Let's create a practical example by lazy-loading a user profile page. First, we'll create a user module and a user-profile component inside it.

bash

- app
  - user
    - user.module
    - user-profile.component

Now, we'll modify our AppModule to lazy-load the UserModule.

typescript

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { LazyModuleModule } from './lazy-module/lazy-module.module';
import { UserModule } from './user/user.module';

@NgModule({
  imports: [
    RouterModule.forRoot([
      // other routes...
      {
        path: 'user-profile',
        loadChildren: () => import('./user/user.module').then(m => m.UserModule),
      },
    ]),
    LazyModuleModule,
    UserModule,
  ],
  declarations: [],
})
export class AppModule { }

Testing Lazy Loading Routes

Now, when you navigate to http://localhost:4200/user-profile, the UserModule and its components will be lazy-loaded, improving the initial load time for your Angular application.

Quiz

By understanding and implementing lazy loading routes in your Angular applications, you can significantly improve their performance and user experience. Happy coding! 🎯 ✅