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 {}

Step 5. Implement navigation

app.component.ts is a root component file of our application. A component file refers to a template app.component.html.

App.component.html file defines the navigation.

<div>
   <a routerLink="/Module1">Menu-1</a> |
   <a routerLink="/Module2">Menu-2</a> |
   <a routerLink="/Module3">Menu-3</a>
   <router-outlet></router-outlet>
</div>

Here are three menus related to having unique route paths that we had mentioned in the app.routing.module file.

Step 6. Set Default path

Here, I have set the default path in our application to “module1”. When the app will run first time, it will start with module1.

const routes: Routes = [
    {
        path: '',
        redirectTo: 'Module1',
        pathMatch: 'full'
    },
    {
        path: 'Module1',
        component: Module1Component
    },
    {
        path: 'Module2',
        component: Module2Component
    },
    {
        path: 'Module3',
        loadChildren: './module3/module3.module#Module3Module'
    },
];

Step 7. Module implementation

Every module mentioned writes a simple text message in the template file, such as “Menu-1 works!”, ”Menu-2 works!”, and ”Menu-3 works!”.

Step 8. Create Module3

Create module3.module.ts like another module that was created previously.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';
import { Module3Component } from './module3.component';
const routes: Routes = [
    {
        path: '',
        component: Module3Component
    },
];
@NgModule({
    declarations: [Module3Component],
    imports: [
        CommonModule,
        RouterModule.forChild(routes)
    ]
})
export class Module3Module {}

Here, the default routing is module3, and RouterModule forChild(routes) is set.

When I run the application, app.module and app.components will be loaded. It will open the page with a menu and then lazy load other components.

The final UI looks like the following. By default, Menu-1 is loaded, but when you click on Menu-2 and Menu-3, the app will lazy load the respective components.

I hope this article was helpful to you.