Root module (AppModule) structure in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the core Angular module.

Angular

import { [1] } from '@angular/core';

Drag options to blanks, or click blank then click option'

AInjectable

BComponent

CDirective

DNgModule

Attempts:

3 left

💡 Hint

Common Mistakes

Importing Component instead of NgModule

Using Injectable which is for services

Forgetting to import anything

The NgModule decorator is imported from '@angular/core' to define Angular modules.

2fill in blank

medium

Complete the code to declare the root component in the module.

Angular

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

Drag options to blanks, or click blank then click option'

AAppComponent

BBrowserModule

CHttpClientModule

DFormsModule

Attempts:

3 left

💡 Hint

Common Mistakes

Putting BrowserModule in declarations instead of imports

Forgetting to declare the root component

Confusing declarations with bootstrap

The root component AppComponent must be declared in the declarations array of the root module.

3fill in blank

hard

Fix the error in the bootstrap array to start the app with the root component.

Angular

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

Drag options to blanks, or click blank then click option'

AHttpClientModule

BBrowserModule

CAppComponent

DFormsModule

Attempts:

3 left

💡 Hint

Common Mistakes

Putting BrowserModule in bootstrap instead of imports

Leaving bootstrap array empty

Using a service or module in bootstrap

The bootstrap array must contain the root component AppComponent to launch the app.

4fill in blank

hard

Fill both blanks to import BrowserModule and declare AppComponent correctly.

Angular

import { NgModule } from '@angular/core';
import { [1] } from '@angular/platform-browser';
import { [2] } from './app.component';

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

Drag options to blanks, or click blank then click option'

ABrowserModule

BHttpClientModule

CAppComponent

DFormsModule

Attempts:

3 left

💡 Hint

Common Mistakes

Importing HttpClientModule instead of BrowserModule

Importing FormsModule instead of AppComponent

Mixing up import paths

BrowserModule is imported from '@angular/platform-browser' to enable browser features.

AppComponent is imported from the local file './app.component' to declare the root component.

5fill in blank

hard

Fill all three blanks to complete the root module with declarations, imports, and bootstrap arrays.

Angular

@NgModule({
  declarations: [[1]],
  imports: [[2]],
  bootstrap: [[3]]
})
export class AppModule {}

Drag options to blanks, or click blank then click option'

AAppComponent

BBrowserModule

DHttpClientModule

Attempts:

3 left

💡 Hint

Common Mistakes

Using HttpClientModule in imports instead of BrowserModule

Forgetting to bootstrap AppComponent

Mixing declarations and imports

The declarations array must include AppComponent to declare the root component.

The imports array must include BrowserModule to enable browser features.

The bootstrap array must include AppComponent to start the app with the root component.