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.

Practice

1. What is the main purpose of bootstrapping in an Angular application?

easy

A. To start the Angular app by linking the root component to the web page

B. To compile CSS styles for the app

C. To create a database connection

D. To generate API endpoints automatically

Solution

1. Step 1: Understand bootstrapping role

   Bootstrapping connects Angular code to the HTML page, starting the app.

2. Step 2: Identify correct purpose

   Only linking the root component to the page matches bootstrapping's role.

3. Final Answer:

   To start the Angular app by linking the root component to the web page -> Option A

4. Quick Check:

   Bootstrapping = start app link [OK]

Hint: Bootstrapping means starting app by linking root component [OK]

Common Mistakes:

• Confusing bootstrapping with styling or backend setup
• Thinking bootstrapping creates API endpoints
• Assuming bootstrapping compiles CSS

2. Which of the following is the correct syntax to bootstrap an Angular module-based application?

easy

A. bootstrapApplication(AppComponent);

B. platformBrowserDynamic().bootstrapModule(AppModule);

C. new Angular().startModule(AppModule);

D. angular.bootstrap(AppComponent);

Solution

1. Step 1: Recall module-based bootstrap syntax

   Angular uses platformBrowserDynamic().bootstrapModule() to start module apps.

2. Step 2: Match syntax to options

   Only platformBrowserDynamic().bootstrapModule(AppModule); matches the correct method and syntax.

3. Final Answer:

   platformBrowserDynamic().bootstrapModule(AppModule); -> Option B

4. Quick Check:

   Module bootstrap = platformBrowserDynamic().bootstrapModule() [OK]

Hint: Use platformBrowserDynamic().bootstrapModule() for modules [OK]

Common Mistakes:

• Using bootstrapApplication() for module apps
• Trying non-existent Angular() constructor
• Using angular.bootstrap() which is AngularJS syntax

3. Given this code snippet, what will Angular do when bootstrapping?

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

bootstrapApplication(AppComponent);

medium

A. Bootstrap the AppComponent as a standalone component application

B. Bootstrap the AppModule as a module-based application

C. Throw a syntax error because bootstrapApplication requires a module

D. Do nothing because bootstrapApplication is deprecated

Solution

1. Step 1: Identify bootstrapApplication usage

   bootstrapApplication() is used to start standalone component apps, not modules.

2. Step 2: Analyze code snippet

   The code calls bootstrapApplication with AppComponent, so it bootstraps that component standalone.

3. Final Answer:

   Bootstrap the AppComponent as a standalone component application -> Option A

4. Quick Check:

   bootstrapApplication = standalone component bootstrap [OK]

Hint: bootstrapApplication() starts standalone components only [OK]

Common Mistakes:

• Confusing bootstrapApplication with module bootstrap
• Thinking bootstrapApplication is deprecated
• Expecting syntax error for missing module

4. Identify the error in this Angular bootstrap code:

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

platformBrowserDynamic().bootstrapModule(AppComponent);

medium

A. Missing parentheses after AppModule

B. platformBrowserDynamic() is deprecated, use bootstrapApplication()

C. AppComponent should be AppModule in bootstrapModule()

D. No error, code is correct

Solution

1. Step 1: Check bootstrapModule argument

   bootstrapModule() expects an Angular module, not a component.

2. Step 2: Identify incorrect argument

   The code passes AppComponent instead of AppModule, causing an error.

3. Final Answer:

   AppComponent should be AppModule in bootstrapModule() -> Option C

4. Quick Check:

   bootstrapModule needs module, not component [OK]

Hint: bootstrapModule() needs module, not component [OK]

Common Mistakes:

• Passing component instead of module to bootstrapModule()
• Thinking platformBrowserDynamic() is deprecated
• Missing parentheses after module name

5. You want to bootstrap an Angular app using a standalone root component named RootComponent. Which is the best way to do this considering Angular 17+ standards?

hard

A. Use platformBrowserDynamic().bootstrapComponent(RootComponent);

B. Create an AppModule and use platformBrowserDynamic().bootstrapModule(AppModule);

C. Call new Angular().bootstrap(RootComponent);

D. Use bootstrapApplication(RootComponent); to start the app

Solution

1. Step 1: Understand Angular 17+ bootstrap options

   Angular 17+ encourages standalone components bootstrapped with bootstrapApplication().

2. Step 2: Match best practice to options

   Use bootstrapApplication(RootComponent); to start the app uses bootstrapApplication() with RootComponent, the recommended way.

3. Step 3: Eliminate incorrect options

   Create an AppModule and use platformBrowserDynamic().bootstrapModule(AppModule); uses module bootstrap, which is valid but not best for standalone. The other options use invalid syntax.

4. Final Answer:

   Use bootstrapApplication(RootComponent); to start the app -> Option D

5. Quick Check:

   Standalone bootstrap = bootstrapApplication() [OK]

Hint: Use bootstrapApplication() for standalone root components [OK]

Common Mistakes:

• Using module bootstrap for standalone components
• Trying non-existent Angular() constructor
• Using bootstrapComponent() which does not exist