[Fixed] throwError(error) is now deprecated, but there is no new Error(HttpErrorResponse) – Angular

Photo of author
Written By M Ibrahim
angular angular12 reacttypescript rxjs

Quick Fix: Replace ‘throwError(error)’ with ‘throwError(() => error)’. This updated syntax is compatible with the latest RxJS version and should address the deprecation warning.

The Problem:

In an Angular application, the throwError(error) method is deprecated. The error handling in the HttpErrorHandlerService relies on throwError to handle error responses from HTTP requests. However, the new Error API doesn’t provide a direct replacement for throwError. How to handle errors in the HttpErrorHandlerService while maintaining the integrity of the application’s functionality and user experience?

The Solutions:

Solution 1: Using Observable throwError

To handle the deprecation of `throwError(error)`, you can use the following syntax in your code:

catchError((error) => throwError(() => error));

This syntax creates an observable that emits the error object, allowing you to handle the error in a centralized manner.

Solution 2: Response to a deprecation warning

If you encounter a deprecation warning related to `throwError(error)`, you can address it by using `new Error(message)` directly. Here’s an example:

import { Observable, throwError } from 'rxjs';

const myObservable = new Observable((observer) => {
  // logic to produce values or errors
});

myObservable.subscribe(
  (value) => {
    // handle successful emissions
  },
  (error) => {
    // handle errors
  }
);

// Instead of using `throwError(error)`
// myObservable.error(error);

// Use `new Error(message)` to create an error object
myObservable.error(new Error('An error occurred'));

This approach explicitly creates an Error object with a message, providing a clear and concise error representation. It eliminates the need for the lambda function in throwError(() => new Error(message)) and simplifies the error-handling code.