Lazy Loading Modules in Angular 8

    Aug 26, 2019       by Pankaj Kumar
lazy-loading-module-angular8.jpg

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

Angular Javascript

WHAT'S NEW

image
JavaScript Complete Guide in Hindi(Free Tutorial)

Click to Watch

Find other similar Articles here:

WHAT'S NEW

image
JavaScript Complete Guide in Hindi(Free Tutorial)

Click to Watch
CATEGORIES
INTERVIEW QUESTIONS