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

Question

I have just upgraded Angular 6.1 to 7 and am running into the following error on my Auth Interceptor:

ERROR in src/app/core/interceptors/auth.interceptor.ts(31,9): error TS2322: Type 'Observable<{} | HttpProgressEvent | HttpSentEvent | HttpHeaderResponse | HttpResponse<any> | HttpUserEvent<any>>' is not assignable to type 'Observable<HttpEvent<any>>'.
  Type '{} | HttpProgressEvent | HttpSentEvent | HttpHeaderResponse | HttpResponse<any> | HttpUserEvent<any>' 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 '{}'.
src/app/core/interceptors/auth.interceptor.ts(62,31): error TS2345: Argument of type '(newToken: string) => Observable<HttpEvent<any>> | Observable<Observable<boolean>>' is not assignable to parameter of type '(value: string, index: number) => ObservableInput<HttpEvent<any>>'.
  Type 'Observable<HttpEvent<any>> | Observable<Observable<boolean>>' is not assignable to type 'ObservableInput<HttpEvent<any>>'.
    Type 'Observable<Observable<boolean>>' is not assignable to type 'ObservableInput<HttpEvent<any>>'.
      Type 'Observable<Observable<boolean>>' is not assignable to type 'Iterable<HttpEvent<any>>'.
        Property '[Symbol.iterator]' is missing in type 'Observable<Observable<boolean>>'.

Here is the code in question:

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpSentEvent | HttpHeaderResponse | HttpProgressEvent | HttpResponse<any> | HttpUserEvent<any> | HttpEvent<any>> {
        **L31** return next.handle(this.addToken(req, this.auth.getToken()))
            .pipe(
                catchError(error => {
                    if (error instanceof HttpErrorResponse) {
                        switch ((<HttpErrorResponse>error).status) {
                            case 400:
                                this.auth.logout();
                                return throwError(error);
                            case 401:
                                return this.handle401Error(req, next);
                            default:
                                return throwError(error);
                        }
                    } else {
                        return throwError(error);
                    }
                })
            );
    }

handle401Error(req: HttpRequest<any>, next: HttpHandler) {
    if (!this.isRefreshingToken) {
        this.isRefreshingToken = true;

        // Reset here so that the following requests wait until the token
        // comes back from the refreshToken call.
        this.tokenSubject.next(null);
        console.log('Refresh Token');

        return this.auth.refreshSession()
            .pipe(
                **L62** switchMap((newToken: string) => {
                    if (newToken) {
                        this.tokenSubject.next(newToken);
                        return next.handle(this.addToken(req, newToken));
                    }
                    // If we don't get a new token, we are in trouble so logout.
                    return of(this.auth.logout());
                }),
                finalize(() => {
                    this.isRefreshingToken = false;
                })
            );
    } else {
        return this.tokenSubject.pipe(
            filter(token => token != null),
            take(1),
            switchMap(token => {
                return next.handle(this.addToken(req, token));
            })
        );
    }
}

I am guessing there has been a change in Typescript (3.1.3) to cause this error but I can't figure out how to resolve it, so any help would be appreciated!

Answer 1

Your error:

 ERROR in src/app/core/interceptors/auth.interceptor.ts(31,9): error TS2322: Type 'Observable<{} | HttpProgressEvent | HttpSentEvent | HttpHeaderResponse | HttpResponse<any> | HttpUserEvent<any>>' is not assignable to type 'Observable<HttpEvent<any>>' 

The angular interface is:

interface HttpInterceptor {
   intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> 
}

see https://angular.io/api/common/http/HttpInterceptor

Your code:

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpSentEvent | HttpHeaderResponse | HttpProgressEvent | HttpResponse<any> | HttpUserEvent<any> | HttpEvent<any>> {

We see, the return type of your method does not match the return type defined in the interface. You'll have to update your code.

 src/app/core/interceptors/auth.interceptor.ts(62,31): error TS2345: Argument of type '(newToken: string) => Observable<HttpEvent<any>> | Observable<Observable<boolean>>' is not assignable to parameter of type '(value: string, index: number) => ObservableInput<HttpEvent<any>>'. 

here is an ObservableInput<HttpEvent<any>> expected but your code returns Observable<HttpEvent<any>> or Observable<Observable<boolean>> .

I guess the problem is hat this.auth.logout() returns an Observable and you add another Observable with your of() call here: return of(this.auth.logout()); but not sure, your IDE should give you better hints here.