How Angular bootstraps an application - Visual Walkthrough

Concept Flow - How Angular bootstraps an application

Browser loads index.html

↓

Angular runtime loads main.ts

↓

Call bootstrapApplication()

↓

Create root component instance

↓

Render root component template

↓

Attach component to DOM

↓

App is ready and interactive

Angular starts by loading the main file, then calls bootstrapApplication to create and render the root component, attaching it to the page.

Execution Sample

Angular

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

bootstrapApplication(AppComponent);

This code starts the Angular app by bootstrapping the root AppComponent.

Execution Table

Step	Action	Input/Trigger	Result	Next
1	Browser loads index.html	User opens app URL	index.html loaded with script tags	Load main.ts
2	Angular runtime loads main.ts	index.html script runs	main.ts executed	Call bootstrapApplication()
3	Call bootstrapApplication()	bootstrapApplication(AppComponent)	Root component instance created	Render root component template
4	Render root component template	AppComponent instance	Component view created	Attach component to DOM
5	Attach component to DOM	Component view	Component added to DOM	App ready
6	App ready	Component in DOM	App interactive and running	End

💡 App is fully bootstrapped and interactive after attaching root component to DOM.

Variable Tracker

Variable	Start	After Step 3	After Step 4	After Step 5	Final
AppComponent instance	undefined	created	template rendered	attached to DOM	interactive
DOM	empty	empty	component view created	component added	component visible

Key Moments - 3 Insights

Why does bootstrapApplication create the root component instance?

bootstrapApplication is the function that tells Angular which component to start with. It creates the root component instance so Angular can render it and show the app UI, as shown in step 3 of the execution_table.

When does the app become interactive?

The app becomes interactive only after the root component is attached to the DOM, which happens at step 6 in the execution_table. Before that, Angular is preparing the component but it is not visible or usable.

What triggers Angular to start bootstrapping?

Angular starts bootstrapping when the browser loads index.html and runs the main.ts script, which calls bootstrapApplication. This is the initial trigger shown in steps 1 and 2 of the execution_table.

Visual Quiz - 3 Questions

Look at the execution_table, what is the result after step 3?

A index.html loaded

B Root component instance created

C Component added to DOM

D App interactive and running

💡 Hint

Check the 'Result' column for step 3 in the execution_table.

At which step does the app become interactive?

A Step 5

B Step 4

C Step 6

D Step 2

💡 Hint

Look for 'App interactive and running' in the 'Result' column of the execution_table.

If the root component is not attached to the DOM, what is the app state according to variable_tracker?

A Component view created but not visible

B Component attached and interactive

C Component instance undefined

D App fully running

💡 Hint

Check variable_tracker for 'AppComponent instance' and 'DOM' states before step 5.

Concept Snapshot

Angular bootstraps an app by:
1. Browser loads index.html
2. main.ts runs and calls bootstrapApplication(rootComponent)
3. Root component instance is created
4. Component template is rendered
5. Component is attached to DOM
6. App becomes interactive and ready

Full Transcript

Angular starts bootstrapping when the browser loads index.html and runs main.ts. The main.ts calls bootstrapApplication with the root component. This creates the root component instance. Angular then renders the component's template and attaches it to the DOM. Once attached, the app is interactive and ready for user actions. This process ensures the app UI appears and works correctly.