throwError(error) is now deprecated, but there is no new Error(HttpErrorResponse)

Instead of this:

    catchError((error) => {
      this.authService.signOut();
      return throwError(error);
    }),

You could try this:

    catchError((error) => {
      this.authService.signOut();
      return throwError(() => error);
    }),

I wasn’t able to test it thoroughly, but a simple attempt seemed to work.

This was my simple test (using RxJS v7.2):

Service

  getProducts(): Observable<IProduct[]> {
    return this.http.get<IProduct[]>(this.productUrl)
      .pipe(
        tap(data => console.log('All: ', JSON.stringify(data))),
        catchError(this.handleError)
      );
  }

  private handleError(err: HttpErrorResponse): Observable<never> {
    // just a test ... more could would go here
    return throwError(() => err);
  }

Notice that err here is of type HttpErrorResponse.

Component

  ngOnInit(): void {
    this.sub = this.productService.getProducts().subscribe({
      next: products => {
        this.products = products;
        this.filteredProducts = this.products;
      },
      error: err => this.errorMessage = err.message
    });
  }

Here I was able to retrieve the message property from the error response and display it in my UI.

Let me know if this works for you.