How Angular bootstraps an application - Practice Exercises

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when Angular bootstraps a standalone component?

Consider an Angular standalone component bootstrapped with bootstrapApplication(). What is the first thing Angular does during this bootstrap process?

Angular

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

bootstrapApplication(AppComponent);

A Angular creates the component instance and inserts it into the DOM at the root element.

B Angular immediately runs all lifecycle hooks of every component in the app.

C Angular compiles the entire application module before creating any component.

D Angular waits for user interaction before rendering the component.

💡 Hint

Think about what Angular needs to do first to show anything on the screen.

When Angular bootstraps a standalone component, it creates the component instance and inserts it into the DOM at the root element. It does not compile modules because standalone components don't require NgModules. Lifecycle hooks run after creation, and Angular does not wait for user interaction to render.

❓ lifecycle

intermediate

Which lifecycle hook runs first during Angular bootstrap?

When Angular bootstraps a component, which lifecycle hook is called first?

Angular

import { Component, OnInit, OnChanges } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<p>Hello</p>`
})
export class AppComponent implements OnInit, OnChanges {
  ngOnChanges() { console.log('OnChanges'); }
  ngOnInit() { console.log('OnInit'); }
}

A ngOnChanges

B ngDoCheck

C ngAfterViewInit

D ngOnInit

💡 Hint

The root component has no @Input properties, so ngOnChanges is skipped.

During Angular bootstrap of the root component, ngOnChanges is called first if there are any input property changes. However, for the root component with no @Input properties, ngOnChanges is not called. Therefore, ngOnInit is the first lifecycle hook called.

📝 Syntax

advanced

Identify the correct syntax to bootstrap an Angular standalone component

Which code snippet correctly bootstraps a standalone Angular component named AppComponent?

A bootstrapStandalone(AppComponent);

B platformBrowserDynamic().bootstrapModule(AppComponent);

C bootstrapModule(AppComponent);

D bootstrapApplication(AppComponent);

💡 Hint

Remember the new Angular 17+ way to bootstrap standalone components.

The correct way to bootstrap a standalone component is using bootstrapApplication(). The other options are either for NgModules or invalid functions.

🔧 Debug

advanced

Why does this Angular bootstrap code fail?

Given this code, why does Angular fail to bootstrap the application?

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

bootstrapApplication();

Angular

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

bootstrapApplication();

A Angular requires a module to bootstrap, not a standalone component.

B AppComponent is not imported correctly, causing a runtime error.

C bootstrapApplication requires the root component as an argument, but none was provided.

D The import statement for bootstrapApplication is incorrect.

💡 Hint

Check the function call and its parameters.

The function bootstrapApplication requires the root component to be passed as an argument. Calling it without arguments causes an error.

🧠 Conceptual

expert

What is the role of platformBrowser in Angular bootstrapping?

During Angular's bootstrap process, what does platformBrowser() provide?

A It manages the routing and navigation of the Angular application.

B It creates a platform that enables Angular to run in a browser environment.

C It compiles the Angular components into browser-compatible JavaScript.

D It initializes the Angular service worker for offline support.

💡 Hint

Think about what 'platform' means in Angular's context.

platformBrowser() creates the platform that allows Angular to run in the browser. It sets up the environment for the app to execute in a web browser.