Bootstrapping with standalone in Angular - Step-by-Step Execution

Concept Flow - Bootstrapping with standalone

Define standalone component

↓

Create main.ts file

↓

Call bootstrapApplication() with component

↓

Angular creates component instance

↓

Component renders in DOM

↓

App ready and interactive

This flow shows how Angular starts an app by bootstrapping a standalone component directly without NgModules.

Execution Sample

Angular

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

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

bootstrapApplication(AppComponent);

This code defines a standalone component and boots it directly to start the Angular app.

Execution Table

Step	Action	Evaluation	Result
1	Define AppComponent with standalone: true	Component metadata processed	Component ready for bootstrap
2	Call bootstrapApplication(AppComponent)	Angular initializes platform	Platform ready
3	Angular creates AppComponent instance	Constructor runs	Component instance created
4	Angular renders template `<h1>Hello Angular Standalone!</h1>`	Template parsed and inserted	DOM updated with <h1> element
5	App is interactive and ready	No errors	App running in browser

💡 App bootstrapped successfully with standalone component, no NgModule needed

Variable Tracker

Variable	Start	After Step 3	After Step 4	Final
AppComponent instance	undefined	created	rendered	active
DOM content	""	""	<h1>Hello Angular Standalone!</h1>	<h1>Hello Angular Standalone!</h1>

Key Moments - 2 Insights

Why do we not need an NgModule to bootstrap the app?

Because bootstrapApplication() accepts a standalone component directly, Angular skips NgModule setup as shown in steps 2 and 3.

What does 'standalone: true' do in the component?

It tells Angular this component can be bootstrapped alone without being declared in an NgModule, enabling direct bootstrapping as seen in step 1.

Visual Quiz - 3 Questions

Look at the execution table, what happens at step 3?

A Angular renders the template into the DOM

B The app finishes bootstrapping

C Angular creates the AppComponent instance

D The component metadata is processed

💡 Hint

Check the 'Action' and 'Result' columns for step 3 in the execution table

At which step does the DOM get updated with the component's template?

A Step 4

B Step 3

C Step 2

D Step 5

💡 Hint

Look for the step where 'DOM updated with

element' appears in the Result column

If we remove 'standalone: true' from the component, what changes in the execution?

A Angular will automatically create an NgModule

B bootstrapApplication() will fail because the component is not standalone

C The component will still bootstrap normally

D The template will not render but the component instance is created

💡 Hint

Refer to the key moment about 'standalone: true' and step 2 in the execution table

Concept Snapshot

Bootstrapping with standalone components:
- Use @Component({standalone: true})
- Call bootstrapApplication(AppComponent) in main.ts
- No NgModule needed
- Angular creates and renders component directly
- Simplifies app startup and reduces boilerplate

Full Transcript

Bootstrapping with standalone in Angular means starting your app by directly using a component marked as standalone. You define a component with standalone: true in its metadata. Then, in your main.ts file, you call bootstrapApplication and pass that component. Angular creates the component instance, renders its template into the DOM, and your app runs without needing an NgModule. This makes starting Angular apps simpler and cleaner.