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

Lazy Loading Routes and Modules in Angular

📖 Scenario: You are building a simple Angular app with 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 routes: '' for Home and 'about' for About. The About module should be loaded lazily when the user navigates to /about.

📋 What You'll Learn

Create a HomeComponent for the home page

Create an AboutModule with AboutComponent inside

Set up the main routing module with a route for HomeComponent

Configure lazy loading for the AboutModule using Angular routing

💡 Why This Matters

🌍 Real World

Lazy loading helps large Angular apps load faster by loading parts only when needed, improving user experience.

💼 Career

Understanding lazy loading is important for Angular developers to optimize app performance and manage code splitting.

1

Create HomeComponent and AboutModule

Create a component called HomeComponent with a simple template showing 'Welcome to Home'. Also create a module called AboutModule that declares a component called AboutComponent with a template showing 'About Us'.

Angular

# Create HomeComponent class with template 'Welcome to Home'
# Create AboutModule class that declares AboutComponent with template 'About Us'

Need a hint?

Use @Component decorator to create components and @NgModule to create the AboutModule.

2

Set up AppRoutingModule with Home route

Create a routing module called AppRoutingModule. Import RouterModule and set up a route with path '' that loads HomeComponent. Export RouterModule configured with this route.

Angular

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

// Define routes array with path '' loading HomeComponent
// Create AppRoutingModule with RouterModule.forRoot(routes)
// Export AppRoutingModule

# Your code here

Need a hint?

Use RouterModule.forRoot() with routes array and export the routing module.

3

Add lazy loading route for AboutModule

Add a route to the routes array with path 'about' that lazy loads AboutModule using loadChildren with a dynamic import: () => import('./about.module').then(m => m.AboutModule).

Angular

const routes: Routes = [
  { path: '', component: HomeComponent },
  // Add lazy loading route for 'about' here
];

# Your code here

Need a hint?

Use the loadChildren property with a dynamic import function to lazy load the AboutModule.

4

Import AppRoutingModule in AppModule

Create an AppModule that imports AppRoutingModule and declares HomeComponent. Also bootstrap HomeComponent.

Angular

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

// Create AppModule that imports BrowserModule and AppRoutingModule
// Declare HomeComponent
// Bootstrap HomeComponent

# Your code here

Need a hint?

Use @NgModule to declare HomeComponent, import BrowserModule and AppRoutingModule, and bootstrap HomeComponent.