How to Lazy Load Modules in Angular 10 with Dynamic Imports

Last updated on by Digamber

In this tutorial, we are learning how to lazy load modules in Angular 10 using dynamic imports.

Lazy loading is the method to download the data on-demand, for instance, Documents, JavaScript, CSS, Images, and Videos in small pieces.

Data loads in chunks instead of bigger pieces; we use dynamic imports and loadChildren properties to deal with lazy loading in Angular.

To create lazy loading in Angular 10, we use the angular app routing module and main app module class to lazy load the angular component.

You can effortlessly get the AppRoutingModule in the app-routing.module.ts file, whereas AppModule class is found in the app.module.ts file.

The standard import syntax is static and will always result in all code in the imported module being evaluated at load time. In situations where you wish to load a module conditionally or on demand, you can use a dynamic import instead.
– MDN

Create Angular Application

It is the primary tool which is also a basic building block for all the angular applications. You need to run the following command to install the latest version of Angular CLI:

npm install -g @angular/cli

Install a new angular application:

ng new angular-lazy-load-example

Navigate to the project root:

cd angular-lazy-load-example

Generate Angular Module

Lazy loading that we are building in Angular is entirely dependent on modules, and we need to execute the below command from the command prompt:

ng generate module blog

In the next step, we will generate a few components inside the blog module directory:

ng generate component blog/signin
ng generate component blog/blog-details

Lazy Load with LoadChildren

With angular’s loadChildren property, you can lazy load modules. Now we have to define the components that need to be lazy-loaded within the angular route.

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

const routes: Routes = [
  { 
    path: 'blog', 
    loadChildren: () => import(`./blog/blog.module`).then(
      module => module.BlogModule
    )
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

export class AppRoutingModule { }

Setting Up Routes

Ultimately, we have configured lazy-loading in route via dynamic import module.

In this step, we are going to create a separate blog routing, which will handle the lazy-loading for the components associated with it.

ng g m blog/blog --routing

Next, import the components that need to be lazy-loaded for blog module and pass them in routes array this way we separate lazy loading components.

Head over to blog/blog-routing.module.ts file and place the following code:

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

import { SigninComponent } from '../signin/signin.component';
import { BlogDetailsComponent } from '../blog-details/blog-details.component';

const routes: Routes = [
  { path: '', component: SigninComponent },
  { path: 'blog-details', component: BlogDetailsComponent }  
];

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

export class BlogRoutingModule { }

We defined the routes for Signin and Blog Details components and inserted within the BlogRoutingModule.

Our next task is to import the blog routing module and components in blog.module.ts file. Also, inject the components inside the declarations array.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { BlogRoutingModule } from './blog/blog-routing.module';

import { SigninComponent } from './signin/signin.component';
import { BlogDetailsComponent } from './blog-details/blog-details.component';

@NgModule({
  imports: [
    CommonModule,
    BlogRoutingModule
  ],
  declarations: [SigninComponent, BlogDetailsComponent]
})

export class BlogModule { }

To test the lazy load functionality, you need to open the Chrome dev tool, navigate to the Network tab and see which files have been loaded:

Lazy Load Request

Here you can see blog module is only loading when we are clicking on the specific route.

Lazy Load Modules in Angular

The Bottom Line

Eventually, we have seen how to lazy load angular modules. In this tutorial, we shed light on loadChildren service with the angular router to lazy load the modules. I hope you loved this tutorial and share it with others.