Lazy loading of modules in Angular 2

In the last post I shortly mentioned the ability of Angular 2 router to load lazily the application modules.

This topic deserves more explanations, so let’s go into details about this feature.

The start point is an Angular 2 applications with a couple of indipendent modules; in orther to have better performances we want to load these module lazily.

Let’s go to the implementation details.

Modules

In the application we have the usual modules Customer and Invoice; the first one:

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { HttpModule } from "@angular/http";
import { CustomerComponent } from "./customer.component";
......

@NgModule ({
imports: [
HttpModule,
RouterModule.forChild([
{
path: "customers",
component: CustomerComponent
}])
],
exports: [
RouterModule
],
declarations: [
CustomerComponent
]
})

export class CustomerModule {}

And the second one:

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { HttpModule } from "@angular/http";
import { InvoiceComponent } from "./invoice.component";
......

@NgModule ({
imports: [
HttpModule,
RouterModule.forChild([
{
path: "invoices",
component: InvoiceComponent
}])
],
exports: [
RouterModule
],
declarations: [
InvoiceComponent
]
})

export class InvoiceModule {}

We have defined the roots for the features modules, that must be configured forChild, according with the Angular 2 specifications.

To enable them in the application, we have to import them in the main module:

import { NgModule } from "@angular/core";
import { HttpModule } from "@angular/http";
import { RouterModule } from "@angular/router";
import { CustomerModule } from "./customer/customer.module";
import { InvoiceModule } from "./invoice/invoice.module";
......

@NgModule ({
imports: [
HttpModule,
CustomerModule,
InvoiceModule,
RouterModule.forRoot([
{
path: "",
redirectTo: "customers",
pathMatch: "full"
}
])],
exports: [
RouterModule
],
......
})

export class AppModule {}

We have finished the configuration and the if we start the application, it’ll work as expected; but we can do more.

At the moment, all the modules of the application will be loaded at the startup of the application; this is not a news, we are not surprized about that, the old angular applications worked in this way.

But with angular 2 we can do more, we are able to load the modules lazily, when required by the application.

The only thing to do is to change the configuration of the router.

Router configuration

The main change concerns the AppModule, where we have to change the configuration of the router:

import { NgModule } from "@angular/core";
import { HttpModule } from "@angular/http";
import { RouterModule } from "@angular/router";
......

@NgModule ({
imports: [
HttpModule,
RouterModule.forRoot([
{
path: "",
redirectTo: "customers",
pathMatch: "full"
},
{
path: "customers",
loadChildren: "app/customer/customer.module#CustomerModule"
},
{
path: "invoices",
loadChildren: "app/invoice/invoice.module#InvoiceModule"
},
])],
exports: [
RouterModule
]
......
})

export class AppModule {}

Instead of import the feature modules, we have defined the path of them as “Childrens”.

What we need to do now is update the paths in the customer and invoice modules:

@NgModule ({
imports: [
......
RouterModule.forChild([
{
path: "",
component: CustomerComponent
}])
],
......
})

@NgModule ({
 imports: [ 
 ......
 RouterModule.forChild([
 {
 path: "",
 component: InvoiceComponent
 }])
 ],
 ......
})

In short, we have changed the default path of the modules, because we declared these in the AppModule above.

The configuration is pretty simple but we can obtain a huge performance improvement.

Consider that in big applications, the modules wont be loaded eagerly and as a result the startup of the application will be very fast.

Here the full Angular2 project.