How Angular bootstraps an application - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to bootstrap an Angular standalone component.

Angular

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

bootstrapApplication([1]);

Drag options to blanks, or click blank then click option'

AAppComponent

BNgModule

CComponent

DBrowserModule

Attempts:

3 left

💡 Hint

Common Mistakes

Passing a module instead of a component

Using a string instead of the component class

The bootstrapApplication function starts the Angular app with the root component, which is AppComponent here.

2fill in blank

medium

Complete the code to import the platform browser module for bootstrapping.

Angular

import { [1] } from '@angular/platform-browser';

Drag options to blanks, or click blank then click option'

AbootstrapApplication

BbootstrapModule

CplatformBrowserDynamic

DNgModule

Attempts:

3 left

💡 Hint

Common Mistakes

Using platformBrowserDynamic which is for modules

Confusing with bootstrapModule

bootstrapApplication is the function used to start an Angular app with a standalone component.

3fill in blank

hard

Fix the error in the bootstrap code by completing the missing argument.

Angular

bootstrapApplication([1]).catch(err => console.error(err));

Drag options to blanks, or click blank then click option'

ARootModule

BAppComponent

CMainComponent

DAppModule

Attempts:

3 left

💡 Hint

Common Mistakes

Passing a module instead of a component

Using a wrong component name

The argument to bootstrapApplication must be the root component class, here AppComponent.

4fill in blank

hard

Fill both blanks to define a standalone component and bootstrap it.

Angular

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

@Component({
  selector: 'app-root',
  template: '<h1>Hello Angular</h1>',
  [1]: true
})
export class AppComponent {}

bootstrapApplication([2]);

Drag options to blanks, or click blank then click option'

Astandalone

Bimports

CAppModule

DAppComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting the standalone flag

Bootstrapping a module instead of the component

The standalone: true flag makes the component standalone. Then bootstrapApplication boots the AppComponent.

5fill in blank

hard

Fill all three blanks to bootstrap a standalone component with an import.

Angular

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { [1] } from '@angular/common';

@Component({
  selector: 'app-root',
  template: '<p>Welcome!</p>',
  [2]: true,
  [3]: [CommonModule]
})
export class AppComponent {}

bootstrapApplication(AppComponent);

Drag options to blanks, or click blank then click option'

ACommonModule

Bstandalone

Cimports

DBrowserModule

Attempts:

3 left

💡 Hint

Common Mistakes

Using BrowserModule instead of CommonModule in standalone components

Forgetting to mark the component as standalone

To use Angular features like ngIf, you import CommonModule. The component is standalone and declares imports.

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