Home » Angular 2 » Angular 2 Lazy Loading

Angular 2 Lazy Loading

Last week when we took a look at Client side Routing, I mentioned that one of the reasons you’d want to implement a component in its own module is so that we could lazy load the component and its dependencies.

This week, we want to dig into how to implement lazy loading in your Angular 2 application.

Angular 2 Lazy Loading
Photo via jordan via Visualhunt

What Is Lazy Loading?

Imagine that you’ve written an application that is divided into four main sections.  The people using the site may only use one or two sections of the site at a time, or at all.  Is it fair to make them download the entire site?

Or maybe you’ve written a monster site.  Wouldn’t it make more sense to download only what you need as you need it?  The perceived performance of a site written like this far exceeds the performance of a site that requires you to download everything at once.

And so, Lazy Loading was developed as a way of solving these issues and others.  The idea is, rather than downloading everything, download only what is needed when it is needed.

The Code

Remember that last week we implemented a View module and an Edit module.  We called them from our router by importing the modules and telling the router to load the components when a route was specified.

Because we are no longer loading the modules as part of our main application, we are going to go into the app-routing.module.ts file and remove all of the references to the components and the module.  Instead, we are going to load the module using the loadChildren property in our route array.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
// import { ViewComponent } from './view/view.component';
// import {ViewModule} from "./view/view.module";
// import {EditModule} from "./edit/edit.module";
// import {EditComponent} from "./edit/edit.component";

const routes: Routes = [
  { path: '',
    loadChildren: './view/view.module#ViewModule'
    //component: ViewComponent
  { path: 'Add',
    loadChildren: './edit/edit.module#EditModule'
    //component: EditComponent
  { path: 'Edit/:id',
    loadChildren: './edit/edit.module#EditModule'
    //component: EditComponent

  imports: [
  exports: [RouterModule],
  providers: []
export class GettingStartedWithAngular2RoutingModule { }

You’ll notice the format of the loadChildren string is:

  1. The path to the module (without the file extension)
  2. hash
  3. The class in the component that is exported

But, there is nothing in the code that tells us what component is supposed to load.  This is because the job of deciding what component to load has now been delegated to the module.

This is the part that remained a mystery to me for quite a while.  I would look at the code demos but never saw the next part.  Maybe this will save you some of that trouble.

In the view module, add this line to the imports array:

    {path: '', component: ViewComponent}

Notice that we are using forChild here instead of forRoot but otherwise this looks the same as what we originally had for the View component prior to implementing lazy loading.

We can implement a similar line in the EditModule, except the component will be EditComponent.

    {path: '', component: EditComponent}

Under the Hood

Build the system using ng build because I want to show you what is happening under the hood.

Once you’ve built the system, look in the dist directory.  You’ll see a 0.chunk.js and a 1.chunk.js file.  These files hold the module and dependencies that we’ve lazy loaded.

If you load the application with the developer tools loaded and look at the network tab, you’ll see that one chunk is loaded immediately, for the view.  The other is loaded when you navigate to the add or edit path.

The code so far can be found at https://github.com/DaveMBush/GettingStartedWithAngular2/tree/Step-4


Other post in Angular 2
Angular 2 Lazy Loading
Article Name
Angular 2 Lazy Loading
How to implement lazy loading in an Angular 2 application
DMB Consulting, LLC

About Dave Bush

Dave Bush is a Full Stack ASP.NET developer focusing on ASP.NET, C#, Node.js, JavaScript, HTML, CSS, BootStrap, and Angular.JS. Does your team need additional help in any of the above? Contact Dave today.

Leave a Reply

1 Comment on "Angular 2 Lazy Loading"

newest oldest most voted
Notify of

[…] Angular 2 Lazy Loading (Dave M. Bush) […]