title: throwError(error) is now deprecated, but there is no new Error(HttpErrorResponse)
body: <p>Apparently <code>throwError(error)</code> is now deprecated. The IntelliSense of VS Code suggests <code>throwError(() =&gt; new Error('error')</code>. <code>new Error(...)</code> accepts only strings. What's the correct way to replace it without breaking my <code>HttpErrorHandlerService </code>?</p>
  <h3>http-error.interceptor.ts</h3>
  <pre><code>import { Injectable } from '@angular/core';
  import {
    HttpEvent,
    HttpInterceptor,
    HttpHandler,
    HttpRequest,
    HttpErrorResponse,
    HttpResponse,
    HttpHeaders
  } from '@angular/common/http';
  import { Observable, EMPTY, finalize, catchError, timeout, map, throwError } from 'rxjs';
  
  import { HttpErrorHandlerService } from '@core/services';
  
  @Injectable()
  export class HttpErrorInterceptor implements HttpInterceptor {
    private readonly APP_XHR_TIMEOUT = 6000;
  
    constructor(private errorHandlerService: HttpErrorHandlerService) {}
  
    intercept(request: HttpRequest&lt;any&gt;, next: HttpHandler): Observable&lt;HttpEvent&lt;any&gt;&gt; {
      return next.handle(this.performRequest(request)).pipe(
        timeout(this.APP_XHR_TIMEOUT),
        map((event: HttpEvent&lt;any&gt;) =&gt; this.handleSuccessfulResponse(event)),
        catchError((error: HttpErrorResponse) =&gt; this.processRequestError(error, request, next)),
        finalize(this.handleRequestCompleted.bind(this))
      );
    }
  
    private performRequest(request: HttpRequest&lt;any&gt;): HttpRequest&lt;any&gt; {
      let headers: HttpHeaders = request.headers;
      //headers = headers.set('MyCustomHeaderKey', `MyCustomHeaderValue`);
      return request.clone({ headers });
    }
  
    private handleSuccessfulResponse(event: HttpEvent&lt;any&gt;): HttpEvent&lt;any&gt; {
      if (event instanceof HttpResponse) {
        event = event.clone({ body: event.body.response });
      }
      return event;
    }
  
    private processRequestError(
      error: HttpErrorResponse,
      request: HttpRequest&lt;any&gt;,
      next: HttpHandler
    ): Observable&lt;HttpEvent&lt;any&gt;&gt; {
      console.log('http error response');
  
      if ([401].includes(error.status)) {
        return throwError(error);
      }
  
      this.errorHandlerService.handle(error);
  
      return throwError(error);
    }
  
    private handleRequestCompleted(): void {
      // console.log(`Request finished`);
    }
  }
  
  import { Injectable } from '@angular/core';
  import { HttpErrorResponse } from '@angular/common/http';
  
  import { MessageService } from 'primeng/api';
  import { TimeoutError } from 'rxjs';
  
  /**
   * Shows a user-friendly error message when a HTTP request fails.
   */
  @Injectable({
    providedIn: 'root'
  })
  export class HttpErrorHandlerService {
    constructor(private messageService: MessageService) {}
  
    handle(error: Error | HttpErrorResponse) {
      if (error instanceof TimeoutError) {
        return this.openDialog('error', `Няма връзка до сървъра.`);
      }
  
      if (error instanceof HttpErrorResponse &amp;&amp; error.error &amp;&amp; error.error.message) {
        return this.openDialog('error', error.error.message);
      }
  
      if (error instanceof Error) {
        switch (error.message) {
          default:
            return this.openDialog('error', `An unknown error occurred`);
        }
      }
  
      // Generic HTTP errors
      switch (error.status) {
        case 400:
          switch (error.error) {
            case 'invalid_username_or_password':
              return this.openDialog('error', 'Невалидно потребителско име или парола');
            default:
              return this.openDialog('error', 'Bad request');
          }
  
        case 401:
          return this.openDialog('error', 'Ще трябва да се логнете отново');
  
        case 403:
          return this.openDialog('error', `You don't have the required permissions`);
  
        case 404:
          return this.openDialog('error', 'Resource not found');
  
        case 422:
          return this.openDialog('error', 'Invalid data provided');
  
        case 500:
        case 501:
        case 502:
        case 503:
          return this.openDialog('error', 'An internal server error occurred');
  
        case -1:
          return this.openDialog(
            'error',
            'You appear to be offline. Please check your internet connection and try again.'
          );
  
        case 0:
          return this.openDialog('error', `CORS issue?`);
  
        default:
          return this.openDialog('error', `An unknown error occurred`);
      }
    }
  
    private openDialog(severity: string, message: string) {
      if (message?.trim()) {
        this.messageService.add({
          key: 'interceptor',
          severity: severity,
          summary: 'Информация',
          detail: message,
          life: 3000
        });
      }
    }
  }
  
  </code></pre>
  <h3>auth.interceptor.ts</h3>
  <pre><code>import { Injectable } from '@angular/core';
  import {
    HttpRequest,
    HttpHandler,
    HttpEvent,
    HttpInterceptor,
    HttpErrorResponse
  } from '@angular/common/http';
  import {
    BehaviorSubject,
    catchError,
    EMPTY,
    filter,
    finalize,
    Observable,
    switchMap,
    take,
    throwError
  } from 'rxjs';
  
  import { AuthService } from '@core/services';
  import { AuthResponse } from '@core/types';
  
  @Injectable()
  export class AuthInterceptor implements HttpInterceptor {
    private refreshTokenInProgress: boolean;
    private refreshToken$ = new BehaviorSubject&lt;AuthResponse | null&gt;(null);
  
    constructor(private authService: AuthService) {}
  
    intercept(request: HttpRequest&lt;any&gt;, next: HttpHandler): Observable&lt;HttpEvent&lt;any&gt;&gt; {
      return next
        .handle(this.performRequest(request))
        .pipe(
          catchError((error: HttpErrorResponse) =&gt; this.processRequestError(error, request, next))
        );
    }
  
    private performRequest(request: HttpRequest&lt;any&gt;): HttpRequest&lt;any&gt; {
      const accessToken = this.authService.getAccessToken();
  
      let headers = request.headers;
      if (accessToken) {
        headers = headers.set('Authorization', `Bearer ${accessToken}`);
      }
  
      return request.clone({ headers });
    }
  
    private processRequestError(
      error: HttpErrorResponse,
      request: HttpRequest&lt;any&gt;,
      next: HttpHandler
    ): Observable&lt;HttpEvent&lt;any&gt;&gt; {
      console.log('auth interceptor called');
  
      if (
        error instanceof HttpErrorResponse &amp;&amp;
        error.status === 401 &amp;&amp;
        this.authService.isSignedIn()
      ) {
        return this.refreshToken(request, next);
      }
  
      return throwError(error);
    }
  
    private refreshToken(request: HttpRequest&lt;any&gt;, next: HttpHandler): Observable&lt;HttpEvent&lt;any&gt;&gt; {
      console.log('refresh token in auth.interceptor called');
  
      // in case the page consists of more than one requests
      if (!this.refreshTokenInProgress) {
        this.refreshToken$.next(null);
        this.refreshTokenInProgress = true;
  
        return this.authService.refreshToken().pipe(
          switchMap((response) =&gt; {
            if (response) {
              this.refreshToken$.next(response);
              return next.handle(this.performRequest(request));
            }
  
            this.authService.signOut();
            return throwError(() =&gt; new Error(&quot;RefreshTokenFailed&quot;));
          }),
          catchError((error) =&gt; {
            this.authService.signOut();
            return throwError(error);
          }),
          finalize(() =&gt; (this.refreshTokenInProgress = false))
        );
      } else {
        // wait while getting new token
        return this.refreshToken$.pipe(
          filter((result) =&gt; result !== null),
          take(1),
          switchMap(() =&gt; next.handle(this.performRequest(request)))
        );
      }
    }
  }
  
  </code></pre>