How to implement lazy loading in angular 4

Posted By : Shilpa Adlakha | 26-Dec-2018

Angular2

The angular application generally loads all the components of the application when we start up the application, and its configurations can be checked in app.module.ts and all components are imported here. This file explains the angular to load all the components at the start of this application.

This process increases the loading time and makes the application and slite slow because in this we have to download all the components at the first time but at this time users only see the home page i.e main / home component.This is the main reason why we need lazy loading to improve its performance and decrease the loading time of the application

How Does Lazy Loading work?

In lazy loaded application, we only focus to load the main component at the starting of the application. If the user navigates to any other new page, then the component for that page loaded automatically and it doesn't mean that we are going to load the module on every page navigation.
In fact, it loads only for the first visit page, it will not load reload that page if we revisit there.

For example:

We will be creating a very simple app, with the structure like this:

.
|- index.html
 |- app
    |- app.component.ts
    |- app.module.ts
    |- app.routing.ts
    |- main.ts
    |- test.component.ts
    |- lazy
        |- lazy.component.ts
        |- lazy.module.ts
        |- lazy.routing.ts

Now we need to lazy load the complete module so for this we need to create out lazy.module.ts:

import { NgModule } from '@angular/core';
import { LazyComponent }   from './lazy.component';
import { LazyRoutingModule } from './lazy.routing';

@NgModule({
  imports: [LazyRoutingModule],
  declarations: [LazyComponent]
})
export class LazyModule {}

and lazy component is:

import { Component } from '@angular/core';

@Component({
  template: '<p>Lazy Component</p>'
})
export class LazyComponent {}

and lazy component is:

import { Component } from '@angular/core';

@Component({
  template: '<p>Lazy Component</p>'
})
export class LazyComponent {}

and lazy.routing.ts:

Now we will create a routing.module.ts and will loadChildren route here and we will append #LazyModule as a postfix in our routes:

import { ModuleWithProviders, NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LazyComponent } from './lazy.component';

@NgModule({
  imports: [
    RouterModule.forChild([
       { path: '', component: LazyComponent }
    ], { useHash: true })
  ],
  exports: [
    RouterModule
  ]
})

export class LazyRoutingModule { }

Now we will include the components using router outlet un app.component.ts file.

import { Component } from '@angular/core';
https://github.com/vitocmpl/ng2-ya-table.git
@Component({
  selector: 'app-root',
  template: `
    <nav>
      <h2>Menu:</h2>
      <a routerLink="test">Test component</a>
      <a routerLink="lazy">Lazy loaded component</a>
    </nav>
    <h2>Router outlet:</h2>
    <router-outlet></router-outlet>
  `
})
export class AppComponent {}