Angular 8: Type 'T' is not assignable to type 'HttpEvent<any>'

Question

I am implementing a intercetor to handle any error globally but i am getting the error below, i have tried a lot of solution but nothing works

interceptor.service.ts

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { AuthService } from '../../core/service/auth.service';

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
   constructor(private authenticationService: AuthService) { }

   intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
      return next.handle(request).pipe(catchError(err => {
    if (err.status === 401) {
     // auto logout if 401 response returned from api
     this.authenticationService.logOut();
     location.reload(true);
  }

    const error = err.error.message || err.statusText;
    return throwError(error);
  }))
 }
}

package.json

{
  "name": "client-app",
  "version": "0.0.0",
  "scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e"
 },
   "private": true,
   "dependencies": {
   "@angular/animations": "~8.2.11",
   "@angular/cdk": "^8.2.3",
   "@angular/common": "~8.2.11",
   "@angular/compiler": "~8.2.11",
   "@angular/core": "~8.2.11",
   "@angular/forms": "~8.2.11",
   "@angular/material": "^8.2.3",
   "@angular/platform-browser": "~8.2.11",
   "@angular/platform-browser-dynamic": "~8.2.11",
   "@angular/router": "~8.2.11",
   "@fortawesome/angular-fontawesome": "^0.6.1",
   "@fortawesome/fontawesome-svg-core": "^1.2.28",
   "@fortawesome/free-brands-svg-icons": "^5.13.0",
   "@fortawesome/free-regular-svg-icons": "^5.13.0",
   "@fortawesome/free-solid-svg-icons": "^5.13.0",
   "@ng-bootstrap/ng-bootstrap": "^5.3.0",
   "@sweetalert2/ngx-sweetalert2": "^7.3.0",
   "bootstrap": "^4.4.1",
   "datatables.net": "^1.10.20",
   "datatables.net-bs": "^1.10.20",
   "datatables.net-bs4": "^1.10.20",
   "datatables.net-dt": "^1.10.20",
   "hammerjs": "^2.0.8",
   "jquery": "^3.4.1",
   "ngx-bootstrap": "^5.5.0",
   "ngx-toastr": "^11.3.3",
   "rxjs": "~6.4.0",
   "sweetalert2": "^9.10.10",
   "tslib": "^1.10.0",
   "zone.js": "~0.9.1"
 },
   "devDependencies": {
   "@angular-devkit/build-angular": "~0.803.13",
   "@angular/cli": "~8.3.13",
   "@angular/compiler-cli": "~8.2.11",
   "@angular/language-service": "~8.2.11",
   "@types/node": "~8.9.4",
   "@types/jasmine": "~3.3.8",
   "@types/jasminewd2": "~2.0.3",
   "codelyzer": "^5.0.0",
   "jasmine-core": "~3.4.0",
   "jasmine-spec-reporter": "~4.2.1",
   "karma": "~4.1.0",
   "karma-chrome-launcher": "~2.2.0",
   "karma-coverage-istanbul-reporter": "~2.0.1",
   "karma-jasmine": "~2.0.1",
   "karma-jasmine-html-reporter": "^1.4.0",
   "protractor": "~5.4.0",
   "ts-node": "~7.0.0",
   "tslint": "~5.15.0",
   "typescript": "~3.5.3"
  }
}

PS:- I am not sure if this a angular related issue or specific to my environment as i can't replicate this issue in stackblitz

Answer 1

I don't have any error. Anyway, do not return an error observable in catchError operator, try to replace return throwError(error); by throw error;

Answer 2

You need to honour the returning type (Observable<HttpEvent<any>>):

intercept(request: HttpRequest<any>, next: HttpHandler)
    : Observable<HttpEvent<any>> {
  return next.handle(request).pipe(catchError(err => {
      if (err.status === 401) {
        // auto logout if 401 response returned from API
        this.authenticationService.logOut();
        location.reload(true);
      }

      // you should return an HTTP error observable
      // const error = err.error.message || err.statusText;
      err.error.info = err.error.message || err.statusText;
      return throwError(error);
    }));
}