Handling HTTP errors in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Angular HTTP client module.

Angular

import { HttpClientModule } from '@angular/common/http';

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

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

AHttpClientModule

BHttpModule

CHttpClient

DHttpErrorResponse

Attempts:

3 left

💡 Hint

Common Mistakes

Using HttpModule which is deprecated.

Importing HttpClient instead of HttpClientModule.

Confusing HttpErrorResponse with the module.

You need to import HttpClientModule to use HTTP services in Angular.

2fill in blank

medium

Complete the code to inject HttpClient into the service constructor.

Angular

import { HttpClient } from '@angular/common/http';

@Injectable({ providedIn: 'root' })
export class DataService {
  constructor(private [1]: HttpClient) {}
}

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

AHttpErrorResponse

BHttpClientModule

Chttp

DhttpClient

Attempts:

3 left

💡 Hint

Common Mistakes

Using the module name instead of a variable name.

Using uppercase variable names.

Using the error class name as variable.

The injected variable name is usually http or similar, but must be a valid identifier.

3fill in blank

hard

Fix the error in the HTTP GET request to handle errors using catchError.

Angular

this.http.get('/api/data').pipe(
  [1](error => {
    console.error('Error occurred:', error);
    return throwError(() => error);
  })
).subscribe(data => console.log(data));

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

AcatchError

BcatchErrors

ChandleError

Dcatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'catch' which is not an RxJS operator.

Using a non-existent 'catchErrors'.

Using a custom function name instead of the operator.

The correct RxJS operator to catch errors is catchError.

4fill in blank

hard

Fill both blanks to create an error handling function that logs and rethrows the error.

Angular

import { throwError } from 'rxjs';
import { HttpErrorResponse } from '@angular/common/http';

handleError(error: [1]) {
  console.error('An error happened:', error.message);
  return [2](() => error);
}

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

AHttpErrorResponse

BthrowError

CcatchError

DError

Attempts:

3 left

💡 Hint

Common Mistakes

Using generic Error instead of HttpErrorResponse.

Using catchError instead of throwError to rethrow.

Not returning an observable from the function.

The error parameter type is HttpErrorResponse and throwError is used to rethrow the error as an observable.

5fill in blank

hard

Fill all three blanks to use the error handler in the HTTP request with pipe and catchError.

Angular

this.http.get('/api/items').pipe(
  [1](this.[2]),
  [3](this.handleError)
).subscribe({
  next: data => console.log(data),
  error: err => console.log('Handled error:', err)
});

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

Atap

Bpipe

CcatchError

Dretry

Attempts:

3 left

💡 Hint

Common Mistakes

Using retry instead of pipe to chain operators.

Using pipe inside pipe.

Not using catchError to handle errors.

Use pipe to chain operators, tap for side effects, and catchError to handle errors.