Using lazy loading routes in Angular

Introduction

Lazy loading is a way to limit the loading of modules currently required by the user. This can improve the performance of the application and reduce the initial bundle size.

By default, Angular uses urgent loading to load modules. This means that all modules must be loaded before the application runs. While this may be sufficient for many use cases, in some cases, this loading time starts to affect performance.

In this article, you will use lazy loading routes in your Angular application.

Prerequisites

To complete this tutorial, you need:

Local installation , you can follow the steps in How to Install and Create a Local Development Environment.
Some settings are familiar with Angular projects.

This tutorial has used Node v16.4.0,npm v7.19.0、@angular/corev12.1.0 and@angular/routerv12.1.0 for verification.

Step 1 – Set up the project

Lazy loaded routes need to be outside the root application module. You will want to put the delayed loading functionality in the function module.

First, let's use the Angular CLI to create a new project with Angular Router:

ng new angular-lazy-loading-example --routing --style=css --skip-tests

Then navigate to the new project directory:

cd angular-lazy-loading-example

Let's create a new functional module:

ng generate module shop --route shop --module

Let's still be with us nowshopCreate 3 components in the functional module:

The first one will becartComponents:

ng generate component shop/cart

The second one will becheckoutComponents:

ng generate component shop/checkout

The third one will beconfirmComponents:

ng generate component shop/confirm

All three components will be located inshopin the directory.

At this point, you should have ashopNew Angular project with modules and 3 components.

Step 2 – Use loadChildren

In your main routing configuration, you will want to do something like the following:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
  { path: 'shop', loadChildren: () => import('./shop/').then(m => ) },
];
@NgModule({
  imports: [(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

In the new Angular 8,loadChildrenExpect a function that uses dynamic import syntax to import your lazy load modules, which will only be imported if needed. Dynamic imports are based on Promise and allow you to access modules where the module's classes can be called.

Step 3 – Set up routing configuration in the function module

Now, all that's left to do is configure routes specific to the function module.

Here is an example:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CartComponent } from './cart/';
import { CheckoutComponent } from './checkout/';
import { ConfirmComponent } from './confirm/';
const routes: Routes = [
  { path: '', component: CartComponent },
  { path: 'checkout', component: CheckoutComponent },
  { path: 'confirm', component: ConfirmComponent },
];
@NgModule({
  imports: [(routes)],
  exports: [RouterModule]
})
export class ShopRoutingModule { }

Finally, in the function module itself, you will useRouterModuleofforChildMethod rather thanforRootTo include your route:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ShopRoutingModule } from './';
import { ShopComponent } from './';
import { CartComponent } from './cart/';
import { CheckoutComponent } from './checkout/';
import { ConfirmComponent } from './confirm/';
@NgModule({
  declarations: [
    ShopComponent,
    CartComponent,
    CheckoutComponent,
    ConfirmComponent,
  ],
  imports: [
    CommonModule,
    ShopRoutingModule
  ]
})
export class ShopModule { }

Now you can userouterLinkCommand Navigation to/shop、/shop/checkoutor/shop/confirm, and the module will be loaded when you first navigate to these paths.

In the terminal, start the server:

ng serve

This will generate aFile and onesrc_app_shop_shop_module_ts.jsdocument:

Initial block file            | name         |      size
            | vendor       |   2.38 MB
         | polyfills    | 128.58 kB
              | main         |  57.18 kB
           | runtime      |  12.55 kB
           | styles       | 119 byte
                      | Initial Total     |   2.58 MB
Delayed block file           | name         |      size
src_app_shop_shop_module_ts.js | -             |  10.62 kB

Next, use the browser to accesslocalhost:4200。

Verify that lazy loading works by opening the browser's DevTools and looking at the Network tab. You should not observe a delayed block file when the application is initially loaded in the application root path. When you navigate to/shopWhen you are waiting for the path, you should observesrc_app_shop_shop_module_ts.js。

Your application now supports lazy loading.

in conclusion

In this article, you learned how to use lazy loading routes in Angular applications.

Continue to learn to test components with dependencies, test services, and use mocks, stubs, and spies.

You can also refer to the official documentation for more information about lazy loading.