Learn About Angular Lazy Loading

Introduction

Angular lazy loading allows the Angular components and their content to load asynchronously. Lazy loading is useful in Web applications that are loading heavy content such as images to load later while the page continues to render. It creates a better user experience, and users don't wait for content to be rendered and seen.

In this article, we will learn how lazy loading works and is implemented in an Angular application.

Step 1. Create Angular project setup

Create an Angular project setup using the below commands or however, you create your Angular app.

Once a sample project is successfully created, that project has some default application structure.

Step 2. Create Parent and Child Modules

Create parent and child modules for this project. Here I create Module1, Module2, and Module3.

Step 3. Configure Root Module

The app.module.ts is the root module of the project. Every Angular application has at least one module. app.module then initially calls app.components and app.route.modules.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
  ],
  providers: [HttpserviceService],
  bootstrap: [AppComponent]
})
export class AppModule {}

Step 4. Define Routing

The main app.routing.module.ts file has to mention the parent and child routing path. Here have mentioned to load children method to load the childv(lazy) feature module. Here address path module3 is the lazy module.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Module1Component } from './module1/module1.component';
import { Module2Component } from './module2/module2.component';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
  {
    path: '',
    redirectTo: 'Module1',
    pathMatch: 'full'
  },
  {
    path: 'Module1',
    component: Module1Component
  },
  {
    path: 'Module2',
    component: Module2Component
  },
  {
    path: 'Module3',
    loadChildren: './module3/module3.module#Module3Module'
  }
];

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