NgModule decorator and metadata in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the NgModule decorator from Angular core.

Angular

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

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

ADirective

BComponent

CInjectable

DNgModule

Attempts:

3 left

💡 Hint

Common Mistakes

Using Component instead of NgModule

Forgetting to import from '@angular/core'

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

2fill in blank

medium

Complete the code to declare a module class named AppModule.

Angular

@NgModule({})
export class [1] {}

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

AAppModule

BMainModule

CRootModule

DModuleApp

Attempts:

3 left

💡 Hint

Common Mistakes

Using a non-standard module name

Misspelling the class name

The main Angular module is conventionally named AppModule.

3fill in blank

hard

Fix the error in the NgModule metadata by completing the imports array with BrowserModule.

Angular

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

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

AHttpClientModule

BCommonModule

CBrowserModule

DFormsModule

Attempts:

3 left

💡 Hint

Common Mistakes

Using CommonModule instead of BrowserModule in root module

Forgetting to import BrowserModule

The BrowserModule must be imported in the root module to enable Angular app running in a browser.

4fill in blank

hard

Fill both blanks to declare a component in declarations and bootstrap arrays.

Angular

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

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

AAppComponent

BMainComponent

CRootComponent

DHomeComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Using different components in declarations and bootstrap

Forgetting to declare the bootstrap component

The AppComponent is declared and bootstrapped in the root module to start the app.

5fill in blank

hard

Fill all three blanks to complete the NgModule metadata with imports, declarations, and bootstrap arrays.

Angular

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

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

ABrowserModule

BAppComponent

DCommonModule

Attempts:

3 left

💡 Hint

Common Mistakes

Using CommonModule instead of BrowserModule in imports

Not bootstrapping the declared component

The root module imports BrowserModule, declares AppComponent, and bootstraps AppComponent.