Lazy loading standalone components in Angular - Mini Project: Build & Apply

Lazy Loading Standalone Components in Angular

📖 Scenario: You are building a simple Angular app that shows different messages on demand. To keep the app fast, you want to load the message components only when the user asks for them.

🎯 Goal: Build an Angular app that lazy loads two standalone components: WelcomeComponent and GoodbyeComponent. The app should load these components only when the user clicks their buttons.

📋 What You'll Learn

Create two standalone components: WelcomeComponent and GoodbyeComponent

Create a main AppComponent with buttons to load each component

Use Angular's loadComponent method to lazy load the components on button click

Display the loaded component inside a container in AppComponent

💡 Why This Matters

🌍 Real World

Lazy loading standalone components helps keep Angular apps fast by loading only what the user needs when they need it.

💼 Career

Understanding lazy loading is important for building scalable Angular applications that perform well and provide a good user experience.

1

Create the standalone components

Create two standalone components named WelcomeComponent and GoodbyeComponent. Each should have a simple template: WelcomeComponent displays "Welcome to the app!" and GoodbyeComponent displays "Goodbye! See you soon."

Angular

# Create WelcomeComponent and GoodbyeComponent as standalone components
# Your code here

Need a hint?

Use @Component decorator with standalone: true and simple templates for each component.

2

Set up the AppComponent with buttons and container

Create a standalone AppComponent with two buttons labeled "Show Welcome" and "Show Goodbye". Add a container element with a template reference variable #container where the lazy loaded components will appear.

Angular

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

@Component({
  selector: 'app-welcome',
  standalone: true,
  template: `Welcome to the app!`
})
export class WelcomeComponent {}

@Component({
  selector: 'app-goodbye',
  standalone: true,
  template: `Goodbye! See you soon.`
})
export class GoodbyeComponent {}

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    Show Welcome
    Show Goodbye
    
  `
})
export class AppComponent {}

# Add buttons and container with #container reference
# Your code here

Need a hint?

Use @ViewChild to get the container reference and add buttons with click handlers.

3

Implement lazy loading logic for components

In AppComponent, implement the methods showWelcome() and showGoodbye(). Use this.container.clear() to clear the container, then use this.container.loadComponent() with dynamic imports to lazy load WelcomeComponent and GoodbyeComponent respectively.

Angular

  showWelcome() {
    this.container.clear();
    this.container.loadComponent(() => import('./welcome.component').then(m => m.WelcomeComponent));
  }
  showGoodbye() {
    this.container.clear();
    this.container.loadComponent(() => import('./goodbye.component').then(m => m.GoodbyeComponent));
  }
# Add main.ts bootstrap code with BrowserModule and AppComponent

Need a hint?

Use dynamic import() inside loadComponent() to lazy load each component.

4

Complete the app with bootstrap and imports

Add the necessary imports and bootstrap code to run the Angular app with AppComponent as the root. Import BrowserModule and bootstrap AppComponent in main.ts.

Angular

Need a hint?

Use bootstrapApplication(AppComponent) to start the app and import BrowserModule in AppComponent.