Root module (AppModule) structure in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Angular root module bootstrap?

Given the following root module code, what component will Angular bootstrap and render first?

Angular

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

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

bootstrapApplication(AppComponent);

A Angular bootstraps but renders an empty page because no template is defined

B Angular bootstraps and renders the AppComponent displaying 'Welcome to Angular!'

C Angular throws an error because AppModule is missing

D Angular bootstraps a default component instead of AppComponent

💡 Hint

Look at which component is passed to bootstrapApplication and what its template contains.

The bootstrapApplication function bootstraps the given component, here AppComponent, which has a template showing 'Welcome to Angular!'. So Angular renders that content first.

📝 Syntax

intermediate

Which option correctly defines the root module with standalone components?

Choose the correct Angular root module code that uses standalone components and bootstraps AppComponent.

A

import { NgModule } from '@angular/core';
@NgModule({
  bootstrap: [AppComponent]
})
export class AppModule {}

B

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

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

C

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
@Component({
  selector: 'app-root',
  template: '<h1>Hello</h1>',
  standalone: true
})
export class AppComponent {}

bootstrapApplication(AppComponent);

D

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

bootstrapApplication(AppComponent);

💡 Hint

Standalone components can be bootstrapped directly without NgModule.

Option D uses bootstrapApplication with a standalone AppComponent, which is the modern Angular pattern. Option D uses the older NgModule approach. Option D misses importing bootstrapApplication and standalone: true in the component decorator. Option D misses declarations and imports.

🔧 Debug

advanced

What error occurs with this root module code?

Analyze the following Angular root module code and identify the error it will cause at runtime or compile time.

Angular

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

@NgModule({
  declarations: [],
  imports: [BrowserModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

A No error, code runs and bootstraps AppComponent correctly

B Compile error: BrowserModule cannot be imported in root module

C Runtime error: AppComponent is not declared in declarations array

D Compile error: bootstrap array cannot contain components

💡 Hint

Check if all components used in bootstrap are declared in declarations.

Angular requires components in bootstrap to be declared in the declarations array. Here AppComponent is missing from declarations, causing a runtime error.

🧠 Conceptual

advanced

How does Angular's root module handle providers?

In Angular's root module (AppModule), where should you provide services to make them available app-wide?

A Add services to the providers array in the root module's @NgModule decorator

B Declare services inside the declarations array of the root module

C Add services to the bootstrap array of the root module

D Import services in the imports array of the root module

💡 Hint

Think about where Angular expects service providers in a module.

Services should be added to the providers array in the root module to be available throughout the app. Declarations are for components, imports for modules, bootstrap for components to start.

❓ lifecycle

expert

What is the sequence of Angular root module initialization?

Order the following steps in the correct sequence during Angular root module (AppModule) bootstrap process.

A 1,2,3,4

B 2,1,3,4

C 1,3,2,4

D 3,1,2,4

💡 Hint

Think about what Angular needs before it can render the root component.

Angular first creates the root injector to resolve services, then compiles components, then bootstraps the root component, and finally renders its template in the DOM.