Use Lazy Loading In Angular 4 Within 5 Minutes

This page will guide you over the concept of Lazy Loading in Angular 4.

Many of times, we’re facing performance issues with our applications.One of the reasons of bad performance is executing your application with lot of modules.

Sometimes, we don’t require to load every module on a landing page of an application.

At that time, the lazy loading comes to the picture in Angular 4.

What is Lazy Loading?

Lazy loading in angular 4 helps us to load our modules based on the user’s call

when a particular routes called then only related module should be called in the browser.

For example, we have a web application with 3 modules, on a landing page, all the three modules are executing every time. Maybe we don’t need to load 3 of them parallel on the landing page.

So, the solution to this problem is we can load a module based on the user’s requirement, that technique is called as lazy loading.

Why it is useful for our app?

Sometimes, our web application becomes a combination of long listed modules, it’s normal.

But at some point, our application starts raising issues of performance because of calling multiple modules at a time.
To overcome this problem, we can use this technique of angular 4, lazy loading.

Moreover, we should use it in a way that helps us to load the modules which are needed for the page loading only.

For example, we have a web application with user’s home and profile modules. We should not load profile page at the time of loading a home page, it might not require having a user’s all profile details to be shown on home page.

When user clicks on the profile tab/button, at that time we should call that profile module using lazy loading technique.

How we can achieve lazy loading in angular 4 apps?

As I mentioned above, we can use lazy loading in our app easily by calling the necessary modules on a particular page.

To achieve lazy loading in angular 4, we can use the routes because they are playing an important role.

There’s a loadChildren keyword in routes that allows us to load the particular module lazily.

So, let’s jump into an example of lazy loading in angular 4 apps.

Example of lazy loading in angular 4

This example will have a module lazy will be called lazily using the technique of lazy loading in angular 4.

First of all, create and set up an application

Learn more about Set up your first Angular 4 App

ng new --routing true angular4-lazyload

Next, generate a component

ng g component Home --module app

Next, generate a module

ng g module --routing true Lazy

Next, generate component under lazy module

ng g c lazy-page --module lazy

More help on Angular CLI

We should import required files in App module.

app.module.ts

//Import core
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
//Import routing module
import { AppRoutingModule } from './app-routing.module';
//Import app component
import { AppComponent } from './app.component';
//Import home component
import { HomeComponent } from './home/home.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

App routing will define the routes.

Note that we’ ve used loadChildren to load the lazy module using lazy loading technique.

app-routing.module.ts

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

const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'lazy', loadChildren: './lazy.module#LazyModule' }
];

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

Lazy module will itself define it’s own child routes.

lazy.module.ts

//Import core
import { NgModule } from '@angular/core';
//Import routes
import { Routes, RouterModule } from '@angular/router';
//Import lazy page component
import { LazyPageComponent } from './lazy-page/lazy-page.component';

const routes: Routes = [
    { path: 'lazy-page', component: LazyPageComponent}
];

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

In app component HTML we can show the router outlet.

app.component.html

<div style="text-align:center">
  <h1>
    Welcome to {{title}}!
  </h1>
</div>
<ul>
    <li>
      <a routerLink="">Home</a>
    </li>
    <li>
      <a routerLink="/lazy/lazy-page">Lazy module</a>
    </li>
</ul>
<router-outlet></router-outlet>

Learn more about Angular 4 Router Outlet

Here we go, we’ re ready to load module named lazy using the lazy loading.

You can verify that in your browser console, lazy.module.chunk.js this will load the lazy module on fly.

By default, when you open your application on the browser @ http://localhost:4200, it won’t load the lazy module on the first browser call because now angular intructed to load lazy module using lazy loading.

Once you click on Lazy Module, it will load that module lazily.

Conclusion

Moreover, optimization is one of the crucial factors for any technology.

For large and complex applications, it’s like a must needed thing to implement.

That’s why angular team has provided a feature Lazy Loading that allows us to optimize our app.

Basically, it helps us to load the modules on fly.

Full example, Angular 4 Lazy Loading Example

Do you know any other techniques that help us to optimize our angular app, thoughts?

Mohit Tanwani

Mohit Tanwani is an enthusiast Techie, a blogger, and IT geek. He has been crazily involved in the industry for 5 years.

Leave a Reply

2 Comments on "Use Lazy Loading In Angular 4 Within 5 Minutes"

avatar
  Subscribe  
newest oldest most voted
Notify of
pasha
Guest

store node_modules in repo isn’t good))
but thanks for working example