Angular -Lazy Loading

Lazy Loading

 

What Is Lazy Loading..?

Lazy loading is a process were angular loads the modules only when it is needed without loading all at once. It is also called as on-demand loading.

 

Why Lazy Loading..? 

Lazy loading modules helps us decrease the start-up time. Angular app can become bigger in size if we add more and more modules for improving features of the app. As the app grows bigger the slower it loads.  By Loading only a part of the app (i.e. lazy loading), the app appears to run faster to the user. The faster loading app gives you a performance boost and results in good user experience.

 

Lazy loading reduce the bundle size of the app which help to boot fast.

 

How Lazy loading Work…?

In angular lazy loading works on module level. Single Components cannot be loaded lazily.

Angular Router Module is the place where we implement lazy Loading. The loadChildren method of the Angular Router is responsible to load the modules.

For loading the module we use this SYNTAX:

const routes: Routes = [
 {
path: "lazy", 
loadChildren:'./ lazy / lazy.module# lazyModule'
}
];

Here

Path=URL path Segment

loadChildern =  loadChildren accepts the value as string. The string is split into two sections separated by #.as shown above(./lazy / lazy.module# LazyModule').

Firstpath(path-to-the-module) Second Path(#module-name)

The first part is the full path to access lazy.module.ts file.

The second part is the export class name of the module i.e. LazyModule.

Note: The lazy loaded module loads only for the first visit of the URL, it will not load when we revisit that URL again.

Another Way to represent above SYNTAX

const routes: Routes = [ 
{ 
path: 'lazy', 
loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule) 
} 
];

Services in Lazy Loaded Module....

We should be very careful while we are creating Services in lazy loading module because services defined in lazy loading module will not be loaded until user navigate to that module.

The Angular creates a separate  injectors for the lazy loaded module. Therefore, any service provided in the lazy loaded module gets its own instance of the service.

Hence create a service in the lazy loaded module, only if it is used inside the lazy loaded Module

 

Lazy Loading Example

Lets Take two modules called admin module and home module we load these modules through lazy loading in app-routing-module.ts

admin-module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AdminComponent } from '../../components/pages/admin/admin.component';
import { AdminRoutingModule } from './admin-routing.module'
@NgModule({
  imports: [
    CommonModule,
    AdminRoutingModule
  ],
  declarations: [
    AdminComponent
  ]
})
export class AdminModule { }

home-module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomeComponent } from '../../components/pages/home/home.component';
import { HomeRoutingModule } from './home-routing.module'

@NgModule({
  imports: [
    CommonModule,
    HomeRoutingModule
  ],
  declarations: [HomeComponent]
})
export class HomeModule { }

app-routing-module.ts

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

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'admin', loadChildren: () => import('./modules/admin/admin.module').then(m => m.AdminModule)},
  { path: 'home', loadChildren: () => import('./modules/home/home.module').then(m => m.HomeModule)},

];

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

In this way the lazy loading implemented.

 

Note: This blog is as per our Knowledge if anything wrong or if you’re not understanding

the topic. Please mail us.

Any Questions comment below.

Thanks

Reference: TecTutorialshub