Error is when the request fails on the server or fails to reach the server due to network issues. In this condition, HttpClient returns an error object instead of a successful response. To resolve this issue, we must handle the component by passing the error object as a second callback to the subscribe() method.

See the following example to understand how we handle the component:

fetchUser() {  

  this.userService.getProfile()  

    .subscribe(  

      (data: User) => this.userProfile = { ...data }, // success path  

      error => this.error = error // error path  

    );  

}  

You can write an error message to give the user some meaningful feedback instead of displaying the raw error object returned from HttpClient.