Bootstrapping with standalone in Angular - Mini Project: Build & Apply

Bootstrapping an Angular Standalone Component

📖 Scenario: You are creating a simple Angular application that shows a welcome message on the page. Instead of using the traditional Angular module system, you will use a standalone component and bootstrap it directly.

🎯 Goal: Build a minimal Angular app by creating a standalone component called AppComponent and bootstrap it using bootstrapApplication.

📋 What You'll Learn

Create a standalone component named AppComponent with a template that displays 'Welcome to Angular Standalone!'

Use the Component decorator with the standalone: true property

Bootstrap the AppComponent using bootstrapApplication from @angular/platform-browser

Ensure the app is bootstrapped without using any NgModule

💡 Why This Matters

🌍 Real World

Modern Angular apps can be built without NgModules by using standalone components, making the code simpler and easier to maintain.

💼 Career

Understanding standalone components and bootstrapApplication is essential for Angular developers to build efficient and modern Angular applications.

1

Create the standalone component

Create a standalone Angular component called AppComponent using the @Component decorator. Set standalone: true and add a template that displays the text 'Welcome to Angular Standalone!'.

Angular

// Create a standalone component named AppComponent
// Use @Component decorator with standalone: true
// Add template with text 'Welcome to Angular Standalone!'

Need a hint?

Use @Component with standalone: true and define a simple template string.

2

Import bootstrapApplication function

Import the bootstrapApplication function from @angular/platform-browser to prepare for bootstrapping the standalone component.

Angular

import { Component } from '@angular/core';
// Import bootstrapApplication from @angular/platform-browser below

@Component({
  selector: 'app-root',
  standalone: true,
  template: `Welcome to Angular Standalone!`
})
export class AppComponent {}

Need a hint?

Use import { bootstrapApplication } from '@angular/platform-browser'; at the top.

3

Bootstrap the AppComponent

Use the bootstrapApplication function to bootstrap the AppComponent. Write the code to call bootstrapApplication(AppComponent).

Angular

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `Welcome to Angular Standalone!`
})
export class AppComponent {}

// Bootstrap the AppComponent below

Need a hint?

Call bootstrapApplication(AppComponent); to start the app.

4

Add error handling for bootstrap

Add a .catch block to the bootstrapApplication(AppComponent) call to catch any errors and log them using console.error.

Angular

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `Welcome to Angular Standalone!`
})
export class AppComponent {}

// Add error handling to bootstrapApplication call below

Need a hint?

Chain .catch(err => console.error(err)) after bootstrapApplication(AppComponent).