Lazy loading modules with routes in Angular - Mini Project: Build & Apply

Lazy Loading Modules with Routes in Angular

📖 Scenario: You are building a simple Angular app that has two sections: Home and About. To make the app faster, you want to load the About section only when the user visits it. This technique is called lazy loading.

🎯 Goal: Create an Angular app with two modules: HomeModule and AboutModule. Set up routing so that the AboutModule is lazy loaded when the user navigates to the /about path.

📋 What You'll Learn

Create a HomeModule with a HomeComponent that shows 'Welcome to Home!'

Create an AboutModule with an AboutComponent that shows 'About Us Information'

Set up the main app routing to load HomeModule eagerly at path '' (empty path)

Set up the main app routing to lazy load AboutModule at path 'about'

Use Angular standalone components and standalone routing where appropriate

💡 Why This Matters

🌍 Real World

Lazy loading modules helps large Angular apps load faster by splitting code into smaller chunks that load only when needed.

💼 Career

Understanding lazy loading and routing is essential for Angular developers to build efficient, scalable web applications.

1

Create HomeModule with HomeComponent

Create a standalone Angular component called HomeComponent that displays the text 'Welcome to Home!'. Then create a standalone Angular module called HomeModule that declares and exports HomeComponent.

Angular

// Create HomeComponent and HomeModule here
// Your code here

Need a hint?

Use @Component with standalone: true for HomeComponent. Then create a module class called HomeModule that imports and exports HomeComponent.

2

Create AboutModule with AboutComponent

Create a standalone Angular component called AboutComponent that displays the text 'About Us Information'. Then create a standalone Angular module called AboutModule that declares and exports AboutComponent.

Angular

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

@Component({
  selector: 'app-home',
  standalone: true,
  template: `Welcome to Home!`
})
export class HomeComponent {}

@NgModule({
  declarations: [],
  imports: [HomeComponent],
  exports: [HomeComponent]
})
export class HomeModule {}

// Create AboutComponent and AboutModule here
// Your code here

Need a hint?

Similar to HomeComponent, create AboutComponent with standalone true and a simple template. Then create AboutModule that imports and exports AboutComponent.

3

Set up main app routing with lazy loading

Create an Angular routing configuration array called routes. Add a route with path '' that loads HomeComponent eagerly. Add a route with path 'about' that lazy loads AboutModule using dynamic import syntax.

Angular

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

// Create routes array with eager HomeComponent and lazy AboutModule
const routes: Routes = [
  // Your code here
];

Need a hint?

Define routes as an array. Use component: HomeComponent for the empty path. Use loadChildren with dynamic import for the 'about' path.

4

Add RouterModule with routes to AppModule

Create an Angular module called AppModule. Import RouterModule.forRoot(routes) and export RouterModule. This sets up the router with the routes you defined.

Angular

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

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

// Your code here

Need a hint?

Import RouterModule.forRoot(routes) in AppModule imports array and export RouterModule.