0
0
Angularframework~20 mins

Bootstrapping with standalone in Angular - Practice Problems & Coding Challenges

Choose your learning style9 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
Challenge - 5 Problems
🎖️
Standalone Bootstrapping Master
Get all challenges correct to earn this badge!
Test your skills under time pressure!
❓ component_behavior
intermediate
2:00remaining
What will this standalone Angular component render?
Consider this standalone Angular component bootstrapped directly. What will be displayed in the browser?
Angular
import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

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

bootstrapApplication(AppComponent);
AThe text 'app-root' displayed as plain text
BAn empty page with no content
CA runtime error because bootstrapApplication requires NgModule
DA heading with text: 'Welcome to Angular Standalone!'
Attempts:
2 left
💡 Hint
Standalone components can be bootstrapped directly without NgModules.
📝 Syntax
intermediate
2:00remaining
Which option correctly bootstraps a standalone component in Angular 17+?
Given a standalone component named 'MainComponent', which code snippet correctly bootstraps it?
Angular
import { bootstrapApplication } from '@angular/platform-browser';
import { MainComponent } from './main.component';
AbootstrapApplication(MainComponent, {providers: []});
BbootstrapApplication({component: MainComponent});
CbootstrapApplication({bootstrap: MainComponent});
DbootstrapApplication(MainComponent);
Attempts:
2 left
💡 Hint
bootstrapApplication takes the component class and an optional config object.
🔧 Debug
advanced
2:00remaining
Why does this standalone component fail to render after bootstrapping?
This standalone component is bootstrapped but nothing appears on the page. What is the most likely cause?
Angular
import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

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

bootstrapApplication(AppComponent);

// index.html contains <body></body> with no <app-root> tag
AThe index.html is missing the <app-root> tag, so Angular has no element to attach to.
BThe component is not declared in any NgModule, causing a runtime error.
CThe bootstrapApplication function requires a selector property in the config.
DStandalone components cannot be bootstrapped directly without a module.
Attempts:
2 left
💡 Hint
Angular needs a matching element in the HTML to attach the component.
❓ lifecycle
advanced
2:00remaining
What lifecycle hook runs first in a standalone Angular component bootstrapped with bootstrapApplication?
In a standalone component bootstrapped directly, which lifecycle hook is called first after the component is created?
Angular
import { Component, OnInit, AfterViewInit } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `<p>Test</p>`
})
export class AppComponent implements OnInit, AfterViewInit {
  ngOnInit() { console.log('OnInit'); }
  ngAfterViewInit() { console.log('AfterViewInit'); }
}

bootstrapApplication(AppComponent);
AngAfterViewInit is called first, then ngOnInit
BngOnInit is called first, then ngAfterViewInit
CBoth hooks are called simultaneously
DNeither hook is called automatically in standalone components
Attempts:
2 left
💡 Hint
Lifecycle hooks run in a specific order regardless of bootstrapping method.
🧠 Conceptual
expert
3:00remaining
What is a key advantage of bootstrapping standalone components in Angular 17+ compared to NgModule bootstrapping?
Choose the most accurate advantage of using standalone components with bootstrapApplication over traditional NgModule bootstrapping.
AIt automatically lazy loads all components without configuration.
BIt allows components to be bootstrapped without any selectors defined.
CIt reduces boilerplate by removing the need for NgModules, simplifying app structure and speeding up startup.
DIt requires less memory because Angular skips change detection.
Attempts:
2 left
💡 Hint
Think about how standalone components change app setup complexity.