How Angular bootstraps an application

Introduction

Angular bootstraps an application to start it up and show the first screen. It connects your code to the web page so users can see and interact with it.

When you want to launch an Angular app in a web browser.

When you need to connect your main component to the HTML page.

When setting up a new Angular project to make it ready for users.

When you want to control how your app starts and which component shows first.

Syntax

Angular

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

This code is usually found in the main.ts file of an Angular project.

It tells Angular to start the app using the AppModule, which holds your app's main setup.

Examples

This is the standard way to bootstrap an Angular app in main.ts.

Angular

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

This is a newer way to bootstrap a standalone Angular component directly without a module.

Angular

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent)
  .catch(err => console.error(err));

Sample Program

This example shows bootstrapping a simple Angular app with one component that displays a welcome message.

Angular

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

@Component({
  selector: 'app-root',
  template: `<h1>Welcome to Angular!</h1>`
})
export class AppComponent {}

bootstrapApplication(AppComponent)
  .catch(err => console.error(err));

Important Notes

Bootstrapping connects your Angular code to the browser so it can show content.

Using bootstrapApplication is simpler for small apps or new Angular versions.

Errors during bootstrap are caught and logged to help find problems early.

Summary

Angular bootstraps start the app by linking code to the web page.

Use platformBrowserDynamic().bootstrapModule() for module-based apps.

Use bootstrapApplication() for standalone component apps.