Lazy Load Modules in Angular 16 with Dynamic Imports

Last Updated on March 4, 2024 by Digamber in Angular

In this tutorial, we are learning how to lazy load modules in Angular 16 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 16, 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.

Make sure to create angular-routing.module.ts file and insert the following code into the file.

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 { }

Next, get into the app/blog/blog/blog.module.ts file and insert the given code into it.

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

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


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

export class BlogModule { }

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 app/blog/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 { }

You have to know add the router-outlet directive in the app.component.html file.

<router-outlet></router-outlet>

Make sure to start the Angular application.

ng serve --open

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:

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

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.

Hope you loved this tutorial and share it with others.