Why modules organize applications in Angular - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a standalone Angular component.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-hello',
  template: '<h1>Hello World</h1>',
  standalone: [1]
})
export class HelloComponent {}

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

Atrue

Bfalse

Cnull

Dundefined

Attempts:

3 left

💡 Hint

Common Mistakes

Setting standalone to false or omitting it causes the component to require a module.

The standalone: true flag makes the component standalone, meaning it does not require a module.

2fill in blank

medium

Complete the code to import a component into an Angular standalone component.

Angular

import { Component } from '@angular/core';
import { HelloComponent } from './hello.component';

@Component({
  selector: 'app-main',
  template: '<app-hello></app-hello>',
  standalone: true,
  imports: [[1]]
})
export class MainComponent {}

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

ACommonModule

BNgModule

CBrowserModule

DHelloComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to import Angular modules instead of the component class.

Standalone components import other standalone components by listing them in the imports array.

3fill in blank

hard

Fix the error in the module definition by completing the missing metadata.

Angular

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

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

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

ABrowserModule

BCommonModule

CFormsModule

DHttpClientModule

Attempts:

3 left

💡 Hint

Common Mistakes

Importing CommonModule instead of BrowserModule in the root module.

The BrowserModule must be imported in the root module to enable browser-specific services.

4fill in blank

hard

Fill both blanks to create a feature module that exports a component.

Angular

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FeatureComponent } from './feature.component';

@NgModule({
  declarations: [[1]],
  imports: [[2]],
  exports: [FeatureComponent]
})
export class FeatureModule {}

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

AFeatureComponent

BAppComponent

CCommonModule

DBrowserModule

Attempts:

3 left

💡 Hint

Common Mistakes

Importing BrowserModule in feature modules instead of CommonModule.

The feature module declares its own component and imports CommonModule for common directives.

5fill in blank

hard

Fill all three blanks to define a standalone component that uses a service and another component.

Angular

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DataService } from './data.service';
import { ChildComponent } from './child.component';

@Component({
  selector: 'app-parent',
  template: '<app-child></app-child>',
  standalone: [1],
  imports: [[2]],
  providers: [[3]]
})
export class ParentComponent {}

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

Atrue

Bfalse

CDataService

DChildComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Setting standalone to false or omitting it.

Not importing the child component used in the template.

Not providing the service in the providers array.

The component is standalone (true), imports the child component, and provides the data service.