Lazy Loading Modules in Angular 8

While application development in any technology, It is very necessary for a developer to make the application serve faster at the client end. Because user does not wait to open a page which is slower. There are different ways in different techniques to enhance the performance of the application. If we talk about Angular framework specifically then it also comes with various techniques to enhance the application performance. Lazy loading modules is one of the way which make the Angular app serves faster.

Lazy loading is the process of loading particular features of Angular application only when user navigates to their routes for the first time. This can be very useful for increasing the application performance and decreasing the initial size of the bundle transmitted to the client browser.

To add lazy loading by asynchronously loading the feature module for routing whenever required, we go to the route configuration and use the property loadChildren. Let's have a look on syntax below:

 { path: 'user-list', loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule) }

Generate Feature Module using Angular CLI

We will load the below-featured module with lazy loading

ng generate module lazy

Generate Component inside Feature Module

ng generate component lazy/user-list

Using loadChildren to lazy load the Feature Module

Angular provides the loadChildren property of a route's path to specify the module that needs to be lazy-loaded when the user first navigated to.

Have a look at the code of the app-routing.module.ts file

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ContactusComponent } from './contactus/contactus.component';


const routes: Routes = [
{
  path:'',component:HomeComponent, pathMatch: 'full'
},
{
  path:'home',component:HomeComponent
},
{
  path:'contact-us',component:ContactusComponent
},
{ path: 'user-list', loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule) },
{ path: '**', component: HomeComponent }
];


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

Configuring Route in Feature Module

Let's have a look on code inside lazy-routing.module.ts file.

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


import { UserListComponent } from './user-list/user-list.component';


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


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

Note: Don't forget to add the routing module in lazy.module.ts file.

Conclusion

Angular has made it very simple to add lazy loading module in the application.

You can find other demos at Angular sample application

That’s all for now. Thank you for reading and I hope this post will be very helpful for understanding lazy loading modules in Angular 8.

Let me know your thoughts over the email demo.jsonworld@gmail.com. I would love to hear them and If you like this article, share with your friends.

Thank You

This article is originally posted over jsonworld