Type '{}' is not assignable to type 'HttpEvent<any>'

Question

I have an error that I cannot find how to solve it, I have an interceptor and in this it gets the state when the token has expired and I proceed to refresh the token the problem is when I raise the Angular project it indicates an error in the console, in the line of (return nex .handle (this. addToken (req)). pipe) the error is as follows.

Thanks for your help in advance.

ERROR in src/app/auth-interceptor.ts(83,19): error TS2322: Type 'Observable<{} | HttpProgressEvent | HttpSentEvent | HttpHeaderResponse | HttpResponse<any> | 
Http...' is not assignable to type 'Observable<HttpEvent<any>>'.
Type '{} | HttpProgressEvent | HttpSentEvent | HttpHeaderResponse | HttpResponse<any> | HttpUserEvent<a...' is not assignable to type 'HttpEvent<any>'.     
Type '{}' is not assignable to type 'HttpEvent<any>'.
Type '{}' is not assignable to type 'HttpUserEvent<any>'.
        Property 'type' is missing in type '{}'.

return next.handle(this.addToken(req)).pipe(
                    catchError((error: HttpEvent<any>) => {
                        if (error instanceof HttpErrorResponse) {
                          console.log("error ",error);
                            switch ((<HttpErrorResponse>error).status) {
                              case 400:
                                return this.handle400Error(error);
                              case 403:
                                  return this.handle403Error(req, next); 
                              default:
                                  return throwError(error);
                            }
                        } else {
                            return throwError(error);
                        }
                    }));

Answer 1

It seems the problem is in return type of handle400Error or handle403Error methods. According to catchError docs:

Catches errors on the observable to be handled by returning a new observable or throwing an error.

@return {Observable} An observable that originates from either the source or the observable returned by the catch selector function.

It means, result of catchError should be an error, or HttpEvent<any> (source type) observable.

E.g. following code snippet has no type errors:

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req).pipe(
      catchError((error: Error) => {
        if (error instanceof HttpErrorResponse) {
          switch ((<HttpErrorResponse>error).status) {
            case 400:
              return this.handle400Error(error);
            default:
              return throwError(error);
          }
        } else {
          return throwError(error);
        }
      }));
  }

  handle400Error(error: HttpErrorResponse) {
    return of(new HttpResponse());
  }

Note: HttpEvent<any> type is not related to HttpErrorResponse type, so it would be better to have Error type for error in catchError.