Angularframework~30 mins

How Angular bootstraps an application - Try It Yourself

Choose your learning style9 modes available

Learn Why Deep Visual Try Challenge Project Recall Perf

How Angular bootstraps an application

📖 Scenario: You are creating a simple Angular application that shows a welcome message on the page. This project will help you understand how Angular starts (bootstraps) an application by connecting the root component to the HTML page.

🎯 Goal: Build a minimal Angular app that bootstraps a root component called AppComponent and displays a welcome message in the browser.

📋 What You'll Learn

Create a root component named AppComponent with a template showing 'Welcome to Angular Bootstrapping!'

Create a standalone Angular component using the standalone: true flag

Bootstrap the Angular application with bootstrapApplication using AppComponent

Use the inject() function if needed for dependency injection

Use Angular 17+ standalone component and bootstrap patterns

💡 Why This Matters

🌍 Real World

Understanding Angular bootstrapping is essential for building any Angular app, as it shows how the app starts and connects to the web page.

💼 Career

Knowing how to bootstrap Angular apps is a fundamental skill for Angular developers, enabling them to set up projects and troubleshoot startup issues.

Progress0 / 4 steps

Create the root component

Create a standalone Angular component named AppComponent with a selector 'app-root' and a template that displays the text 'Welcome to Angular Bootstrapping!'. Use the @Component decorator with standalone: true.

Angular

// Create a standalone component named AppComponent with selector 'app-root' and template 'Welcome to Angular Bootstrapping!'
// Your code here

Need a hint?

Use @Component with standalone: true and set the template to the welcome message.

Import bootstrapApplication function

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

Angular

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

// Import bootstrapApplication from @angular/platform-browser
// Your code here

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

Need a hint?

Use import { bootstrapApplication } from '@angular/platform-browser'; to import the bootstrap function.

Bootstrap the Angular application

Call bootstrapApplication with AppComponent as the argument to start the Angular app.

Angular

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

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

// Bootstrap the application with AppComponent
// Your code here

Need a hint?

Use bootstrapApplication(AppComponent); to start the app.

Add the root HTML element

Add the root HTML element <app-root></app-root> inside the <body> tag in your index.html file to host the Angular app.

Angular

 inside the  tag in index.html -->

Need a hint?

Place <app-root></app-root> inside the <body> tag in index.html.