Shared modules for reusable components in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the shared module in the app module.

Angular

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { [1] } from './shared/shared.module';

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

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

ASharedModule

BCommonModule

CHttpClientModule

DFormsModule

Attempts:

3 left

💡 Hint

Common Mistakes

Importing Angular built-in modules instead of the shared module.

Forgetting to import the shared module.

You need to import SharedModule to use shared components in your app module.

2fill in blank

medium

Complete the code to export a reusable component from the shared module.

Angular

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReusableComponent } from './reusable/reusable.component';

@NgModule({
  declarations: [ReusableComponent],
  imports: [CommonModule],
  exports: [[1]]
})
export class SharedModule {}

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

ABrowserModule

BCommonModule

CAppComponent

DReusableComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Exporting modules instead of components.

Not exporting the reusable component.

Exporting ReusableComponent makes it available to other modules that import SharedModule.

3fill in blank

hard

Fix the error in the shared module by completing the imports array.

Angular

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

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

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

ACommonModule

BBrowserModule

CFormsModule

DHttpClientModule

Attempts:

3 left

💡 Hint

Common Mistakes

Importing BrowserModule in shared modules (should only be in root module).

Forgetting to import CommonModule.

CommonModule provides common directives like ngIf and ngFor needed in shared components.

4fill in blank

hard

Fill both blanks to create a shared module that declares and exports a component.

Angular

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

@NgModule({
  declarations: [[2]],
  imports: [CommonModule],
  exports: [ButtonComponent]
})
export class SharedModule {}

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

AButtonComponent

BAppComponent

CCommonModule

DFormsModule

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong component names in import or declarations.

Not declaring the component before exporting.

You import and declare ButtonComponent so it can be exported and reused.

5fill in blank

hard

Fill all three blanks to create a shared module that imports CommonModule, declares, and exports a component.

Angular

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

@NgModule({
  declarations: [[3]],
  imports: [CommonModule],
  exports: [CardComponent]
})
export class SharedModule {}

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

ACommonModule

BCardComponent

CButtonComponent

DFormsModule

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing component names in import and declarations.

Forgetting to import CommonModule.

Import CommonModule, import and declare CardComponent to export it for reuse.