Angular - Lazy-loading feature modules

NgModule is a set of cohesive block of code defines a particular application area, has a closely related set of capabilities. A typical NgModule file declares components, directives, pipes, and services. A module can import functionality from other NgModules that are exported, also a module can also export its own functionality for external use.

Every Angular application has at least one NgModule class which is actually the root module, and conventionally named AppModule. It resides in a file named app.module.ts. The application will be launched by bootstrapping the root NgModule, which actually launch the AppComponent resides in the file app.component.ts.

A small application might have only one NgModule which could be suffice, but as the application grows, we need more feature modules for better maintenance and optimization. So its a good approach to develop your application with multiple modules covering different areas of the application.

One of the main advantages of NgModules is that they can be lazy loaded. Lazy loading is the process of loading components or modules of an application as they're required. In the default application created by Angular, with a single module, all of its components are loaded at once. This means that a lot of unnecessary libraries or modules might be loaded as well, and that could be fine with small applications. But as the application grows, the users will start experiencing performance issues, because the load time will increase if everything is loaded at once. Here we can utilize Lazy loading, which allows Angular to load components and modules only when when they are needed.

Let’s sees an example, how we can configure lazy loading.

In this example, we will create two modules, ModuleUser and ModuleOrder, which will be lazy loaded.

Create a new Angular project (myapp) by executing the below command:

ng new myapp --routing

Here, we are creating a new project with routing.

Open your project in VS Code.

code myapp

By default, a root module(AppModule) is created under /src/app. Below is the content of NgModule(app.module.ts) file that's created.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

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

Typically, it imports all the required modules and components.

The @NgModule decorator states that the AppModule class is a type of NgModule. @NgModule() decorator takes a single metadata object, whose properties describe the module. The most important properties are as follows.

declarations: The components, directives, and pipes in this NgModule.
imports: Other modules that are required in this NgModule.
providers: The services that this NgModule provides to global collection of services; they become accessible in all parts of the application.
bootstrap: The root component that Angular inserts into the index.html web page, this component will host all other application views. Only the root NgModule should set the bootstrap property.
exports: In above code snippet, we dont have this porperty by default, but if we are defining new modules, we can use this to indicate a subset of declarations that should be visible and usable by other NgModules.

Lets go back to the application, and create two buttons in the app.component.html. Replace your app.component.html file with the contents below.

<button routerLink="user">Load Module User</button>
<button routerLink="order">Load Module Order</button>
<router-outlet></router-outlet>

These buttons will allow the user to load and navigate to corresponding modules.

Let’s define the modules for routes user & order.

To create lazy loaded modules, execute the below commands:

ng generate module moduleuser --route user --module app.module
ng generate module moduleorder --route order --module app.module

The commands will generate two folders called moduleuser and moduleorder. Each folder will contain its own default files, i.e. module.ts, routing.ts and component files.

If you check your app-routing.module.ts you will see the below code for routes:

const routes: Routes = [
  { path: 'user', loadChildren: () => 
           import('./moduleuser/moduleuser.module').then(m => m.ModuleuserModule) },
  { path: 'order', loadChildren: () => 
           import('./moduleorder/moduleorder.module').then(m => m.ModuleorderModule) }
];

For both paths (user & order), it uses loadChildren() function which means when the route user or order is visited, it loads their respective modules.

Run the project with

ng serve

You will see the below screen:

Click the Load Module User button, you will be redirected to the user page. This is how your screen should look:

When you click on Load Module Order button, you should see the similar output with moduleorder's content.

So far, we have create two modules and loaded in our application. But how can we verify if these modules are really being loaded lazily.

In order to verify that these modules files are lazily loaded, open the browser's Developer Tools by pressing F12, visit the Network tab. When you refresh the page it will show a few files that were requested and loaded.

Lets clear your list of requests by hitting the Clear button. Now When you click on the Load Module User button on the page, you will see a request for moduleuser-moduleuser-module.js as in the screenshot below. This verifies that Module User is lazily loaded.

Similarly, when you click Load Module Order, the moduleorder-moduleorder-module.js file is loaded. This verifies that Module Order is loaded lazily.