Error Handling in Angular 4

You will get errors while making HTTP request. Possible scenarios, your Web API has stopped running or the API (after few updates) got errors. You can handle the errors in your Angular 4 application.

Remember we have added a subscribe() method in our component. Open app.component.tsfile and check the method. It has a callback method named data =>. You can add an error handler method as the second callback method like this.

import { HttpErrorResponse } from '@angular/common/http/src/response';
data => {
    this.myBooks = data as string [];
},
(err: HttpErrorResponse) => {
    console.log (err.message);
}

First, import HttpErrorResponse class to the component and add the err:HttpErrorResponse callback method, after the data=> method, separated by a comma. This will show error a message (if any) in your browser console.

Well, that’s it.

This article and its example are for beginners who are learning Angular 4 and want to make HTTP requests to Web API in Asp.Net MVC 4. This is very basic, however useful. We have also learned about HttpClientModule and HttpClient service introduced in Angular 4.3.x.

Thanks for reading.