Lazy Loading in Angular4

Lazy loading in angular is very useful with lazy loading we load data or component when we want to see the particular component.By default angular load all module, component when you are creating large scale application or mobile application performance matter so the solution is lazy loading.I have created home and about component for demo check your network tab first it will load home component only when you click on about link then it will load about component in this way you can see lazy loading is very useful

 
app.module.ts
 
import { NgModule } from '@angular/core';
import { BrowserModule  } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { routing } from './app.routing';

@NgModule({
  imports: [
    BrowserModule,
    routing
  ],
  declarations: [
    AppComponent,
    HomeComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}
 
app.component.ts
 
I have added home and about link
 
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    ` }) export class AppComponent {}
 
app.routing.ts

To know what those paths are loading when clicking on them we need to take a look at the routing object that we passed to the root module.You can see we are loading home component when application loads in path and about is loading through loadChildren. But more importantly, you can see that whenever we try to go to the path about, we are going to lazy load a module conveniently called AboutModule. Look closely at the route.

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

import { HomeComponent } from './home/home.component';

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'about', loadChildren: './about/about.module#AboutModule' }
];
export const routing: ModuleWithProviders = RouterModule.forRoot(routes);
 
home.component.ts
 
import { Component } from '@angular/core';
@Component({
  template: '' }) export class HomeComponent {}

Home Component

 
about.module.ts
 
import { NgModule } from '@angular/core';

import { AboutComponent }   from './about.component';
import { routing } from './about.routing';

@NgModule({
  imports: [routing],
  declarations: [AboutComponent]
})
export class AboutModule {}
 
about.component.ts
 
import { Component } from '@angular/core';

@Component({
  template: '' }) export class AboutComponent {}

About Component

Note that we use the method call forChild instead of forRoot to create the routing object.

 
about.routing.ts
 
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { AboutComponent } from './about.component';

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

export const routing: ModuleWithProviders = RouterModule.forChild(routes);

Screen shot when application first load
home
Screen shot after about us page load.
about

Leave a Reply

Your email address will not be published. Required fields are marked *