Feature modules for organization in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a standalone Angular feature module.

Angular

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

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

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

AFormsModule

BBrowserModule

CCommonModule

DHttpClientModule

Attempts:

3 left

💡 Hint

Common Mistakes

Importing BrowserModule instead of CommonModule in a feature module.

Forgetting to import any module for common directives.

The CommonModule provides common directives like ngIf and ngFor needed in feature modules.

2fill in blank

medium

Complete the code to import the feature module into the root module.

Angular

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

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

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

AFeatureModule

BFormsModule

CHttpClientModule

DCommonModule

Attempts:

3 left

💡 Hint

Common Mistakes

Importing CommonModule or FormsModule instead of the feature module.

Forgetting to import the feature module in the root module.

The root module imports the feature module to include its components and functionality in the app.

3fill in blank

hard

Fix the error in the feature module by completing the code to declare the component.

Angular

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

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

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

AFeatureModule

BFeatureService

CAppComponent

DFeatureComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Importing the module or service instead of the component.

Not importing the component at all.

The component class FeatureComponent must be imported to declare it in the module.

4fill in blank

hard

Fill both blanks to create a feature module with a service provider.

Angular

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

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

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

AFeatureService

BFeatureComponent

CFeatureModule

DCommonModule

Attempts:

3 left

💡 Hint

Common Mistakes

Providing the component or module instead of the service.

Not importing the service before providing it.

The service class FeatureService must be imported and added to the providers array to be injectable within the module.

5fill in blank

hard

Fill all three blanks to create a feature module with a component, service, and import.

Angular

import { NgModule } from '@angular/core';
import { [1] } from '@angular/common';
import { [2] } from './feature.component';
import { [3] } from './feature.service';

@NgModule({
  declarations: [FeatureComponent],
  imports: [CommonModule],
  providers: [FeatureService],
  exports: [FeatureComponent]
})
export class FeatureModule {}

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

ACommonModule

BFeatureComponent

CFeatureService

DBrowserModule

Attempts:

3 left

💡 Hint

Common Mistakes

Importing BrowserModule instead of CommonModule.

Mixing up component and service imports.

Forgetting to import any of these.

Import CommonModule for common directives, FeatureComponent to declare the component, and FeatureService to provide the service.