Lazy Loading Feature Module

Last update on August 19 2022 21:51:37 (UTC/GMT +8 hours)

Lazy loading modules in Angular allows applications to load modules only when they are needed i.e when you first visit the route(s) corresponding to component(s) belonging to the lazy loaded module. This has many benefits on your Angular application such as the performance and size.

There are three main steps to setting up a lazy loaded feature module:

Create the feature module.
Create the feature module’s routing module.
Configure the routes.

Set up an app

Set up an angular app by running the following commands

ng new customer-app -routing

This creates an app called customer-app and the --routing flag generates a file called app-routing.module.ts, which is one of the files you need for setting up lazy loading for your feature module. Navigate into the project by issuing the command cd customer-app.

Create a feature module with routing

Next, you’ll need a feature module to route to. To make one, enter the following command at the terminal window prompt where customers are the name of the module:

ng generate module customers -routing

This creates a customers folder with two files inside; CustomersModule and CustomersRoutingModule. CustomersModule will act as the gatekeeper for anything that concerns customers.

CustomersRoutingModule will handle any customer-related routing. This keeps the app's structure organized as the app grows and allows you to reuse this module while easily keeping its routing intact.

The CLI imports the CustomersRoutingModule into the CustomersModule by adding a JavaScript import statement at the top of the file and adding CustomersRoutingModule to the @NgModule imports array.

Add a component to the feature module

In order to see the module being lazy loaded in the browser, create a component to render some HTML when the app loads CustomersModule. At the command line, enter the following

ng generate component customers/customer-list

This creates a folder inside of customers called customer-list with the four files that make up the component.

Add another feature module

For another place to route to, create a second feature module with routing:

ng generate module orders -routing

This makes a new folder called orders containing an OrdersModule and an OrdersRoutingModule.

Now, just like with the CustomersModule, give it some content:

ng generate component orders/order-list

Set up the UI

Though you can type the URL into the address bar, a nav is easier for the user and more common. Replace the default placeholder markup in app.component.html with a custom nav so you can easily navigate to your modules in the browser:

HTML Code:

<html>
  <h1>
  {{title}}
</h1>

<button routerLink="/customers">Customers</button>
<button routerLink="/orders">Orders</button>
<button routerLink="">Home</button>

<router-outlet></router-outlet>

Live Demo:

It is just a code snippet explaining a particular concept and may not have any output

See the Pen lazy_loading_app.component.html by w3resource (@w3resource) on CodePen.

To make the buttons work, you need to configure the routing modules.

Configure the routes

The two feature modules, OrdersModule and CustomersModule, have to be wired up to the AppRoutingModule so the router knows about them.

Each feature module acts as a doorway via the router. In the AppRoutingModule, you configure the routes to the feature modules, in this case OrdersModule and CustomersModule. This way, the router knows to go to the feature module. The feature module then connects the AppRoutingModule to the CustomersRoutingModule or the OrdersRoutingModule. Those routing modules tell the router where to go to load relevant components.

Routes at the app level

In AppRoutingModule, update the routes array with the following:

TypeScript Code:

const routes: Routes = [
  {
    path: 'customers',
    loadChildren: './customers/customers.module#CustomersModule'
  },
  {
    path: 'orders',
    loadChildren: './orders/orders.module#OrdersModule'
  },
  {
    path: '',
    redirectTo: '',
    pathMatch: 'full'
  }
];

Live Demo:

It is just a code snippet explaining a particular concept and may not have any output

See the Pen app-routing-module.ts by w3resource (@w3resource) on CodePen.

The import statements stay the same. The first two paths are the routes to the CustomersModule and the OrdersModule respectively. The lazy loading syntax uses loadChildren followed by a string that is the relative path to the module, a hash mark or #, and the module's class name.

Inside the feature module

Next, take a look at customers.module.ts. If you're using the CLI and following the steps outlined in this page, you don't have to do anything here. The feature module is like a connector between the AppRoutingModule and the feature routing module. The AppRoutingModule imports the feature module, CustomersModule, and CustomersModule in turn imports the CustomersRoutingModule.

TypeScript Code:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CustomersRoutingModule } from './customers-routing.module';
import { CustomerListComponent } from './customer-list/customer-list.component';

@NgModule({
  imports: [
    CommonModule,
    CustomersRoutingModule
  ],
  declarations: [CustomerListComponent]
})
export class CustomersModule { }

Live Demo:

It is just a code snippet explaining a particular concept and may not have any output

See the Pen customer.module.ts by w3resource (@w3resource) on CodePen.

The customers.module.ts file imports the CustomersRoutingModule and CustomerListComponent so the CustomersModule class can have access to them. CustomersRoutingModule is then listed in the @NgModule imports array giving CustomersModule access to its own routing module, and CustomerListComponent is in the declarations array, which means CustomerListComponent belongs to the CustomersModule.

Configure the feature module's routes

The next step is in customers-routing.module.ts. First, import the component at the top of the file with the other JavaScript import statements. Then, add the route to CustomerListComponent.

TypeScript Code:

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

import { CustomerListComponent } from './customer-list/customer-list.component';


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

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

Live Demo:

It is just a code snippet explaining a particular concept and may not have any output

See the Pen customers-routing.ts by w3resource (@w3resource) on CodePen.

Previous: Providers
Next: NgModule API