Lazy Loaded Module Example in Angular 10/9 with loadChildren

Lazy loading is the process of loading some features of your Angular application only when you navigate to their routes for the first time. This can be useful for increasing your app performance and decreasing the initial size of the bundle transmitted to the user's browser.

In Angular 10 and previous versions till Angular 8, the syntax for lazy-loading modules has changed and it's now more aligned with the standard browser's API.

You now need to use the dynamic import syntax to import your module in the loadChildren property of Angular Router routes.

The dynamic import API is a standard browser's API introduced in modern browers. It's promise-based and gives you access to the module, from where the module's class can be called.

Setting up an Angular 10 Project

You need to have Angular CLI 10 installed and an Angular 10 project with routing setup.

Adding an Angular 10 Module

We can only lazy-load modules in Angular so let's generate a feature module using the Angular CLI 10:

$ ng generate module admin

Next, we can also add a couple of components in our module:

$ ng generate component admin/login

$ ng generate component admin/dashboard

Using loadChildren to Lazy-Load your Angular 10 Module

Angular provides the loadChildren property of a route's path to specify the module that needs to be lazy loaded when it's first navigated to.

Open the src/app/app-routing.module.ts file and update it as follows:

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

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

const routes: Routes = [

{ path: 'admin', loadChildren: () => import(`./admin/admin.module`).then(m => m.AdminModule) },

];

Configuring Routes in your Angular 10 Feature Module

After configuring the route to lazy-load your feature module, you'll next need to add routing to the various components of the admin module which needs to have its own routes seprated from the main routing module that resides in the src/app/app-routing.module.ts file.

Go ahead and create a admin/admin-routing.module.ts file and add the following code:

import { Routes } from '@angular/router';

import { RouterModule } from  '@angular/router';

import { LoginComponent } from './login/login.component';

import { DashboardComponent } from './dashboard/dashboard.component';

const routes: Routes = [

    { path: '', component: LoginComponent },

    { path: 'dashboard', component: dashboardComponent }

];

@NgModule({

  imports: [RouterModule.forChild(routes)],

  exports: [RouterModule]

})

export class AdminRoutingModule { }

We create the routes to the various components of our admin module and we include these routes in the admin routing module.

We need to feed the routes to the Angular Router using the forChild() method instead of the forRoot() module.

Open the src/app/admin/admin.module.ts file and import the exported admin routing module as follows:

import { AdminRoutingModule } from './admin-routing.module';

Next, add it to the imports array of the admin module:

@NgModule({

  imports: [

    CommonModule,

    AdminRoutingModule

  ],

  declarations: [LoginComponent, DashboardComponent]

})

export class AdminModule { }