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

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

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

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

Hint

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

Practice

1. What is the main purpose of lazy loading modules in Angular applications?

easy

A. To load modules only when they are needed, improving startup speed

B. To preload all modules at app start for faster navigation

C. To combine all modules into one big file for simplicity

D. To disable routing and load components manually

Solution

1. Step 1: Understand lazy loading concept

   Lazy loading means delaying the loading of parts of the app until they are needed, not all at once.

2. Step 2: Identify the benefit

   This reduces the initial load time and speeds up app startup by loading only essential code first.

3. Final Answer:

   To load modules only when they are needed, improving startup speed -> Option A

4. Quick Check:

   Lazy loading = load on demand [OK]

Hint: Lazy loading means load modules only when needed [OK]

Common Mistakes:

• Thinking lazy loading loads all modules at start
• Confusing lazy loading with preloading
• Believing lazy loading disables routing

2. Which of the following is the correct syntax to lazy load a module named AdminModule located at ./admin/admin.module.ts in Angular routing?

easy

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

B. { path: 'admin', loadChildren: './admin/admin.module#AdminModule' }

C. { path: 'admin', component: AdminModule }

D. { path: 'admin', loadChildren: () => AdminModule }

Solution

1. Step 1: Recall Angular lazy loading syntax

   Since Angular 8+, lazy loading uses dynamic import syntax with loadChildren as a function returning a promise.

2. Step 2: Match syntax to options

   { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) } uses the correct arrow function with import and then to get the module class.

3. Final Answer:

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

4. Quick Check:

   Dynamic import with arrow function = { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) } [OK]

Hint: Use dynamic import with arrow function for lazy loading [OK]

Common Mistakes:

• Using string syntax with # which is deprecated
• Assigning component instead of loadChildren
• Calling loadChildren without import

3. Given this route configuration snippet:

{ path: 'shop', loadChildren: () => import('./shop/shop.module').then(m => m.ShopModule) }

What happens when the user navigates to /shop for the first time?

medium

A. The ShopModule is loaded immediately when the app starts

B. The ShopModule is never loaded and navigation fails

C. The ShopModule is loaded asynchronously only at navigation time

D. The ShopModule is loaded synchronously blocking the UI

Solution

1. Step 1: Understand lazy loading behavior on navigation

   With lazy loading, the module is not loaded at app start but only when the route is visited.

2. Step 2: Apply to given route

   When user navigates to '/shop', Angular triggers the dynamic import to load ShopModule asynchronously.

3. Final Answer:

   The ShopModule is loaded asynchronously only at navigation time -> Option C

4. Quick Check:

   Lazy load triggers on first navigation [OK]

Hint: Lazy loaded modules load on first route visit, not app start [OK]

Common Mistakes:

• Assuming module loads at app start
• Thinking navigation fails without preloading
• Believing loading blocks UI synchronously

4. Consider this incorrect route configuration:

{ path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule' }

What is the main issue with this code in Angular 17+?

medium

A. DashboardModule should be imported directly, not lazy loaded

B. Missing component property for the route

C. The path should be an array, not a string

D. Using string syntax for loadChildren is deprecated and causes errors

Solution

1. Step 1: Identify deprecated syntax

   Angular versions 8+ require dynamic import syntax for lazy loading, not string with #.

2. Step 2: Explain impact

   Using string syntax causes build or runtime errors because Angular no longer supports it.

3. Final Answer:

   Using string syntax for loadChildren is deprecated and causes errors -> Option D

4. Quick Check:

   String syntax deprecated = Using string syntax for loadChildren is deprecated and causes errors [OK]

Hint: Avoid string syntax; use dynamic import for loadChildren [OK]

Common Mistakes:

• Thinking component is required with loadChildren
• Confusing path type with string vs array
• Believing direct import is mandatory for lazy loading

5. You want to lazy load a feature module ProfileModule only when the user navigates to /profile. The module file is at ./profile/profile.module.ts. Which of the following route configurations correctly implements this with Angular 17+ standards and ensures accessibility and performance?

hard

A. { path: 'profile', loadChildren: () => import('./profile/profile.module').ProfileModule }

B. { path: 'profile', loadChildren: () => import('./profile/profile.module').then(m => m.ProfileModule) }

C. { path: 'profile', component: ProfileModule }

D. { path: 'profile', loadChildren: './profile/profile.module#ProfileModule' }

Solution

1. Step 1: Use correct dynamic import syntax

   Angular 17+ requires loadChildren as a function returning a promise with dynamic import and then to access the module class.

2. Step 2: Verify accessibility and performance

   Lazy loading delays module load until navigation, improving performance. Using this syntax supports Angular's router and accessibility features.

3. Final Answer:

   { path: 'profile', loadChildren: () => import('./profile/profile.module').then(m => m.ProfileModule) } -> Option B

4. Quick Check:

   Dynamic import + then + lazy load = { path: 'profile', loadChildren: () => import('./profile/profile.module').then(m => m.ProfileModule) } [OK]

Hint: Always use dynamic import with then for lazy loading modules [OK]

Common Mistakes:

• Using deprecated string syntax
• Assigning component instead of loadChildren
• Missing .then() after import