Bootstrapping with standalone in Angular - Interactive Code 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'

AComponent

BNgModule

CBrowserModule

DAppComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Passing a module instead of a component.

Using NgModule which is not needed for standalone bootstrapping.

The bootstrapApplication function takes the standalone component to start the app. Here, AppComponent is the standalone component.

2fill in blank

medium

Complete the code to add a provider when bootstrapping a standalone component.

Angular

bootstrapApplication(AppComponent, {
  providers: [[1]]
});

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

A{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }

BHttpClientModule

CRouterModule

DNgModule

Attempts:

3 left

💡 Hint

Common Mistakes

Adding modules instead of providers.

Passing a module like HttpClientModule directly in providers.

Providers are added as objects describing the service. Here, an HTTP interceptor is provided correctly.

3fill in blank

hard

Fix the error in bootstrapping by completing the missing import.

Angular

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { importProvidersFrom } from '@angular/core';
import { [1] } from '@angular/common/http';

bootstrapApplication(AppComponent, {
  providers: [importProvidersFrom(HttpClientModule)]
});

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

AHttpClientModule

BHttpClient

CHttpHandler

DHttpInterceptor

Attempts:

3 left

💡 Hint

Common Mistakes

Importing HttpClient instead of HttpClientModule.

Forgetting to import the module before adding it to providers.

The HttpClientModule must be imported from @angular/common/http and used with importProvidersFrom to provide HTTP services in standalone bootstrapping.

4fill in blank

hard

Complete the blank to correctly bootstrap a standalone component with routing.

Angular

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

bootstrapApplication(AppComponent, {
  providers: [[1]([])]
});

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

ARouterModule

BimportProvidersFrom

CprovideRouter

DRoutes

Attempts:

3 left

💡 Hint

Common Mistakes

Using RouterModule directly in providers without wrapping.

Confusing Routes type with provider functions.

To add routing providers in standalone bootstrapping, import and use provideRouter([]) in the providers array.

5fill in blank

hard

Fill all three blanks to bootstrap a standalone component with HTTP and routing providers.

Angular

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { [1] } from '@angular/common/http';
import { [2] } from '@angular/router';
import { [3] } from '@angular/core';

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(HttpClientModule),
    provideRouter([])
  ]
});

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

AHttpClientModule

BprovideRouter

CimportProvidersFrom

DRouterModule

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up RouterModule with provideRouter.

Forgetting to import HttpClientModule.

Import HttpClientModule for HTTP, and provideRouter and importProvidersFrom for routing providers.