Importing dependencies directly in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the HttpClient module from Angular.

Angular

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

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

AHttpModule

BHttpClientModule

CHttpService

DHttpClient

Attempts:

3 left

💡 Hint

Common Mistakes

Using HttpModule which is deprecated.

Confusing HttpClientModule with HttpClient.

The HttpClientModule is imported from @angular/common/http to enable HTTP services in Angular applications. The HttpClient is imported from this module when injecting it into components or services.

2fill in blank

medium

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

Angular

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

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

ANgModule

BInjectable

CDirective

DComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Importing NgModule instead of Component.

Confusing Injectable with Component.

The Component decorator is imported from @angular/core to define Angular components.

3fill in blank

hard

Fix the error in the import statement to correctly import the RouterModule.

Angular

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

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

ARouterModule

BRoutes

CRouter

DRouteModule

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'Router' which is a service, not a module.

Using 'RouteModule' which does not exist.

The RouterModule is the correct module to import from @angular/router for routing features.

4fill in blank

hard

Fill both blanks to import the Injectable decorator and the OnInit interface from Angular core.

Angular

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

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

AInjectable

BOnInit

CComponent

DNgModule

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing Component with Injectable or OnInit.

Importing NgModule instead of OnInit.

Injectable is used to mark services for dependency injection, and OnInit is an interface for component initialization lifecycle.

5fill in blank

hard

Fill all three blanks to import the FormsModule, ReactiveFormsModule, and Validators from Angular forms.

Angular

import { [1], [2], [3] } from '@angular/forms';

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

AFormsModule

BReactiveFormsModule

CValidators

DFormBuilder

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing FormBuilder with Validators.

Importing only one forms module instead of both.

FormsModule and ReactiveFormsModule are modules for template-driven and reactive forms respectively, and Validators provides validation functions.