Module lazy loading preview in Angular - Mini Project: Build & Apply

Module lazy loading preview

📖 Scenario: You are building a simple Angular app that has two feature modules: AdminModule and UserModule. To improve performance, you want to load these modules only when the user navigates to their routes.This technique is called lazy loading. It helps the app start faster by loading only the necessary code first.

🎯 Goal: Create an Angular app routing setup that lazy loads AdminModule and UserModule when the user visits /admin and /user paths respectively.

📋 What You'll Learn

Create a routes array with lazy loading configuration

Use the loadChildren property with dynamic import syntax

Set up routes for /admin and /user paths

Export the routing configuration as AppRoutingModule

💡 Why This Matters

🌍 Real World

Lazy loading modules is a common technique in Angular apps to improve startup speed and user experience by loading code only when needed.

💼 Career

Understanding lazy loading is important for Angular developers to build scalable and performant applications.

1

Create the routes array with lazy loading paths

Create a constant called routes that is an array with two objects. The first object should have path set to 'admin' and loadChildren set to a function that imports './admin/admin.module' and returns AdminModule. The second object should have path set to 'user' and loadChildren set to a function that imports './user/user.module' and returns UserModule.

Angular

# Your code here

Need a hint?

Use the dynamic import syntax import('path').then(m => m.ModuleName) inside loadChildren.

2

Import RouterModule and NgModule, then configure RouterModule

Import RouterModule from '@angular/router' and NgModule from '@angular/core' respectively. Then create an Angular module class called AppRoutingModule decorated with @NgModule. Inside the decorator, add imports with RouterModule.forRoot(routes) and exports with RouterModule.

Angular

const routes = [
  {
    path: 'admin',
    loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)
  },
  {
    path: 'user',
    loadChildren: () => import('./user/user.module').then(m => m.UserModule)
  }
];

// Your code here

Need a hint?

Remember to import NgModule from @angular/core and RouterModule from @angular/router.

3

Add a default route redirecting to /user

Add a new object at the start of the routes array with path set to an empty string '' and redirectTo set to 'user'. Also add pathMatch set to 'full'.

Angular

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

const routes = [
  // Add default redirect route here
  {
    path: 'admin',
    loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)
  },
  {
    path: 'user',
    loadChildren: () => import('./user/user.module').then(m => m.UserModule)
  }
];

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

Need a hint?

The default route uses redirectTo and pathMatch: 'full' to redirect empty path to /user.

4

Add a wildcard route to redirect unknown paths to /user

Add a new object at the end of the routes array with path set to '**' and redirectTo set to 'user'. This will catch all unknown routes and redirect them to the user module.

Angular

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

const routes = [
  {
    path: '',
    redirectTo: 'user',
    pathMatch: 'full'
  },
  {
    path: 'admin',
    loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)
  },
  {
    path: 'user',
    loadChildren: () => import('./user/user.module').then(m => m.UserModule)
  },
  // Add wildcard route here
];

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

Need a hint?

The wildcard route uses path: '**' to catch all unknown URLs and redirect them.