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.