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.

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