Angular 14 Lazy Load Modules with Dynamic Imports Tutorial

Angular lazy load modules example, throughout this guide, you will ascertain how to lazy load modules in angular application using dynamic import syntax.

Modules are chunks of code containing (values, functions, or classes). Making a module public can be done by defining it with export syntax; the main reason for creating a module is to group or organize the code, especially for reusability purposes.

In this tutorial, you will learn how to create lazy loading modules in angular using dynamic import API; after implementing lazy loading in angular with loadChildren API of Angular Router routes, you will reduce the size of your primary bundle and enhance the application’s loading.

The main power of lazy loading lies within its core; you can load specific modules only when required or navigate the route associated with them.

Dynamic import is a powerful promise-based API that works seamlessly on modern browsers and gives non-interpretable access to the module’s class.

Install Angular App

To find out the how to implement lazy loading in angular. First, install a new angular project:

ng new angular-lazy-load-demo

Create Module and Components in Angular

To lazy-load the module in angular, you have to use the following command to generate the module.

ng generate module dashboard

Next, you need to generate a components within the dashboard module:

ng generate component dashboard/profile
ng generate component dashboard/user-list

Disable Strict Angular TypeStrict Errors

The latest version of Angular comes with strict mode, you have to manually disable the strict mode you can set “strict”: false, "noImplicitReturns": false and "strictTemplates": false inside the compilerOptions and angularCompilerOptions in tsconfig.json file.

Implement loadChildren in Angular Routes

In this step, you will implement loadChildren in angular routes for enabling lazy loading in angular application.

LoadChildren function that returns a set of routes to load.

Open and update app-routing.module.ts file:

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

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

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

export class AppRoutingModule { }

Create Module Routes

So far, the lazy-load module has been configured; now you have to create routes for the other components related to the dashboard module. Theses routes will be apart from primary routing module, which fundamentally found in app routing class.

Create a foundational dashboard routing file:

ng generate m dashboard/dashboard --routing

Eventually, you have to update the below code in dashboard/dashboard-routing.module.ts file:

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

import { ProfileComponent } from '../profile/profile.component';
import { UserProfileComponent } from '../user-profile/user-profile.component';

const routes: Routes = [
  { path: '', component: ProfileComponent },
  { path: 'user-profile', component: UserProfileComponent }  
];

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

export class DashboardRoutingModule { }

Now, open dashbaord/dashboard.module.ts file, import dashboard related angular components same way define them in declarations array respectively.

Likewise, import DashboardRoutingModule at the top and inject it inside the imports array as shown in the below code example.

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

import { DashboardRoutingModule } from './dashboard/dashboard-routing.module';

import { ProfileComponent } from './profile/profile.component';
import { UserProfileComponent } from './user-profile/user-profile.component';

@NgModule({
  imports: [
    CommonModule,
    DashboardRoutingModule
  ],  
  declarations: [
    ProfileComponent, 
    UserProfileComponent    
  ],
})

export class DashboardModule { }

Test Angular Lazy Load Example

You need to open the console, and start the application:

ng serve --open

The above command start the app, now paste the following URL on the browser’s address bar:

http://localhost:4200/dashboard
  • Open the browser’s console
  • Go to the Network tab

Lazy Load in Angular

You can clearly see the Dashboard module is loaded when visited the specific route

Conclusion

The angular lazy load module tutorial is over, i reckon this tutorial has been beneficial for you. Over and above that, you now have a better understanding of integrating lazy loading in angular. We learned how to use the dynamic import in addition to loadChildren property in angular routes.