Implementing Lazy Loading from Angular ⭐

In this article, I will delve into the implementation process of Lazy Loading in your Angular application. Additionally, I will provide a step-by-step guide on how to do lazy loading for you application.

Before delving into the concept of lazy loading, it is essential to have a clear understanding of routing.

Angular Routing

Angular routing is a mechanism that allows you to navigate between different views and components in your Angular application. It helps you build single-page applications (SPAs)by dynamically changing the content displayed on the page without reloading the entire page. Instead of traditional server-side routing, where the server handles navigation and page loads, Angular routing handles navigation on the client-side.

Why we want Lazy loading to our Application

Lazy loading is essential for optimizing the performance and user experience of your application. Lazy loading allows your application to load only the essential components and modules needed for the initial view. Other part of component are loading if user navigate to through the application.

What is Angular Lazy Loading

Angular provides a powerful feature called "Lazy Loading" which allows developers to load modules and components on-demand. Lazy loading is technique that allow user to defer loading of certain parts of an angular application. Parts mean certain modules in the application. These modules are loaded dynamically when a user navigate to a route associated with that module, It will reduce the initial load time as well.

Implementing Lazy loading to our Angular Application

In your Angular Application you need to create feature modules that encapsulate specific parts of your application. These modules can be loaded independently, and you can specify which modules should be lazy-loaded based on the routes.

Step 1: Configure Routes

in side your app.component.html template you need to defined the
<router-outlet></router-outlet>

<h2>{{title}}</h2>

<button class="btn btn-primary btn-sm" style="margin: 1%;"  routerLink="/users">Users</button>
<button class="btn btn-primary btn-sm" style="margin: 1%;" routerLink="/home">Home</button>

<router-outlet></router-outlet>

In your main app-routing.module.ts, configure your routes using the loadChildren property instead of component. The loadChildren property takes a string that points to the relative path of the lazy-loaded module.

Note: LoadChildren is use for lazy loading

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path:'',
    redirectTo:'',
    pathMatch:'full'
  },
  {
    path:'users',
    loadChildren:()=> import('./users/users.module').then(m=> m.UsersModule)
  },
  {
    path:'home',
    component:HomeComponent
  }

];

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

Step 2: Create the Users Modules
To use Lazy Loading, we need to create feature modules that encapsulate specific parts of our application. Each feature module contains its components, services, and other related files.

Open the terminal command and create new component called users component by running the command

ng generate component users

Create the users Module(in this case, users.module.ts),

ng generate module users

Note: You can create the above module and component manually instead of executing commands

Apart from that, we need to create a feature routing module under the users-routing.module.ts file. It should be defined in the users.module.ts file under the imports section.

  imports: [
    CommonModule,
    UsersRoutingModule
  ]

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

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

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

Here is the folder structure after generating the component and module file

Step 3: Defined Child routing from the users module

We need to created two separate component called users-list and users-detail

inside the users.module.ts we need to defined the two component under the declarations

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UsersComponent } from './users.component';
import { UsersRoutingModule } from './users-routing.module';
import { UsersListComponent } from './users-list/users-list.component';
import { UserDetailComponent } from './users-list/user-detail/user-detail.component';



@NgModule({
  declarations: [
    UsersComponent,
    UsersListComponent,
    UserDetailComponent
  ],
  imports: [
    CommonModule,
    UsersRoutingModule
  ]
})
export class UsersModule { }

After that we need to defined the feature child routing under the users-routing.module.ts under the routes

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { UsersComponent } from './users.component';
import { UsersListComponent } from './users-list/users-list.component';
import { UserDetailComponent } from './users-list/user-detail/user-detail.component';

const routes: Routes = [
  {
    path:'',
    component:UsersComponent
  },
  {
    path:'user-list',
    component:UsersListComponent
  },
  {
    path:'user/:id',
    component:UserDetailComponent
  }
];

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

Step 4: Defined Child routing handling Templates

Inside the users.component.html file, we have set up navigation for the child routing using the routerLink directive. This allows us to navigate to different child routes when the user clicks on specific links. Here's an example of how it's done:

<h2>User Component</h2>

<button class="btn btn-warning btn-sm" style="margin: 1%;" [routerLink]="['/users','user-list']">User List</button>
<button class="btn btn-warning btn-sm" style="margin: 1%;" [routerLink]="['/users','user','123']">User Details</button>

For Explanation about above **routerLink**
The [routerLink] attribute can be bound to an expression, and in the [routerLink]="['/users','user-list'] the expression is ['/users', 'user-list']. This expression is an array of path segments, where each element represents a part of the route URL.

Let's break down the expression:

• '/users' : Representing the parent route. It indicates that the navigation will happen relative to the 'users' route

• 'user-list' : Representing the child route. It indicates that we want to navigate to the 'user-list' route, which is a child route of the 'users' route

Conclusion:
Angular Lazy Loading is a powerful feature that optimizes performance by loading modules and components on-demand. By strategically employing Lazy Loading, we can reduce the initial load time and improve the overall user experience

That’s It!

Of course you probably want to see this in action. Here’s a working demo for you to fork or play with:

Demo

GitHub : dev-to-angula lazy loading

Thanks for reading the whole story ❤