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.

Practice

1. What is the main purpose of the AppModule in an Angular application?

easy

A. To declare components and import modules needed for the app

B. To style the application globally

C. To handle HTTP requests

D. To manage routing only

Solution

1. Step 1: Understand the role of AppModule

   The AppModule is the root module that organizes the app's components and imports other modules.

2. Step 2: Identify what AppModule does

   It declares components and imports modules needed for the app to work properly.

3. Final Answer:

   To declare components and import modules needed for the app -> Option A

4. Quick Check:

   AppModule organizes components and imports [OK]

Hint: AppModule declares components and imports modules [OK]

Common Mistakes:

• Confusing AppModule with styling or HTTP handling
• Thinking AppModule only manages routing
• Assuming AppModule is for CSS or HTTP only

2. Which of the following is the correct way to define the bootstrap property in @NgModule for starting the app with AppComponent?

easy

A. bootstrap: AppComponent

B. bootstrap = AppComponent

C. bootstrap = [AppComponent]

D. bootstrap: [AppComponent]

Solution

1. Step 1: Recall the syntax for bootstrap in @NgModule

   The bootstrap property expects an array of components to start the app.

2. Step 2: Match the correct syntax

   Using bootstrap: [AppComponent] is the correct way to provide an array with the main component.

3. Final Answer:

   bootstrap: [AppComponent] -> Option D

4. Quick Check:

   Bootstrap uses array syntax [OK]

Hint: Bootstrap needs an array of components [OK]

Common Mistakes:

• Using assignment (=) instead of colon (:)
• Not wrapping component in an array
• Omitting brackets around AppComponent

3. Given this AppModule snippet, what will happen when the app starts?

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 { }

medium

A. The app will throw a syntax error

B. The app will fail because BrowserModule is missing

C. The app will start and display the AppComponent template

D. The app will start but show a blank page

Solution

1. Step 1: Check declarations and imports

   AppComponent is declared and BrowserModule is imported, which is required for browser apps.

2. Step 2: Verify bootstrap property

   AppComponent is bootstrapped correctly, so it will be the starting component shown.

3. Final Answer:

   The app will start and display the AppComponent template -> Option C

4. Quick Check:

   Proper declarations, imports, and bootstrap means app runs [OK]

Hint: Check declarations, imports, and bootstrap for app start [OK]

Common Mistakes:

• Assuming BrowserModule is missing
• Thinking bootstrap array can be empty
• Confusing syntax errors with correct code

4. Identify the error in this AppModule code:

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

medium

A. imports should not include BrowserModule

B. declarations should be an array, not a single component

C. bootstrap should not be an array

D. Missing import statement for AppComponent

Solution

1. Step 1: Check declarations syntax

   Declarations must be an array of components, but here it is a single component without brackets.

2. Step 2: Confirm other parts are correct

   Imports and bootstrap are correctly formatted; import statement is assumed present.

3. Final Answer:

   declarations should be an array, not a single component -> Option B

4. Quick Check:

   Declarations require array syntax [OK]

Hint: Declarations always use arrays [OK]

Common Mistakes:

• Forgetting brackets around declarations
• Confusing imports with declarations
• Thinking bootstrap cannot be an array

5. You want to add a new component HeaderComponent to your Angular app. Which changes must you make in AppModule to include it properly?

hard

A. Add HeaderComponent to declarations array and import its file

B. Add HeaderComponent only to bootstrap array

C. Add HeaderComponent to imports array

D. No changes needed if HeaderComponent is in the same folder

Solution

1. Step 1: Import the new component

   You must import HeaderComponent from its file to use it in AppModule.

2. Step 2: Declare the component in declarations array

   Adding HeaderComponent to declarations lets Angular recognize and use it in templates.

3. Final Answer:

   Add HeaderComponent to declarations array and import its file -> Option A

4. Quick Check:

   New components require import and declaration [OK]

Hint: Import and declare new components in AppModule [OK]

Common Mistakes:

• Adding component to imports instead of declarations
• Only adding to bootstrap instead of declarations
• Assuming no changes needed for new components