類型&#39;Observable &lt;{}不可分配給類型&#39;Observable <HttpEvent<any> &gt;”

Question

我想將我的角度4遷移到角度5。我已經完成了從角度4到角度5的遷移，現在我的攔截器出現錯誤以刷新令牌。 如果遇到401錯誤，我將使用以下代碼攔截所有請求並刷新令牌：

import { Observable } from 'rxjs/Observable';
import { Injectable, Injector } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http';
import { UserService } from "./user/services/user.service";
import { SpinnerService } from "angular-spinners";

@Injectable()
export class AngularInterceptor implements HttpInterceptor {
    public userService;
    public spinnerService;

    constructor(private injector: Injector) {
    }

    private applyCredentials = function (req) {
        return req.clone({
            headers: req.headers.set('Authorization', 'Bearer ' + localStorage.getItem('eb-app-token'))
        });
    };

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        this.userService = this.injector.get(UserService);
        this.spinnerService = this.injector.get(SpinnerService);

        return next.handle(this.applyCredentials(req))
            /*.do(event => {

                if (event instanceof HttpResponse) {
                    console.log(event);
                }
            })*/
            .catch((res) => {
                console.log('Token refresh');
                if (res.status === 401 || res.status === 403) {
                    return this.userService.refreshToken().first().flatMap((data: any) => {
                        console.log(data.data);
                        if (data.data !== '') {
                            localStorage.removeItem('token');
                            localStorage.setItem('token', data.data);

                            this.userService.token = localStorage.getItem('token');
                            this.userService.isAuthenticated = true;
                        } else {
                            this.userService.logOut();

                            return Observable.throw(res);
                        }

                        return next.handle(this.applyCredentials(req));
                    });
                }
                else if (res.status === 500) {
                    this.spinnerService.hide('spinner');
                    this.spinnerService.hide('spinner-search');

                    this.userService.logOut();
                }

                return Observable.throw(res);
            });
    }
}

我有這個錯誤：

ERROR in src/app/app.interceptor.ts(25,9): 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 '{}'.

我試圖修改不同的東西。 我讀了這篇文章Observable <{}>不能分配給Observable <SomeType []>類型，但是我沒有看到相同的問題...

第25行是：

return next.handle(this.applyCredentials(req))

UPDATE

我修改了：

return next.handle(this.applyCredentials(req))

通過

return <any>next.handle(this.applyCredentials(req))

並導入：

import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';

Answer 1

您沒有將具有預期類型的​​對象發送到句柄函數。 您可能可以通過將其解析為來快速修復它，例如

return next.handle(<any> this.applyCredentials(req))

但是您確實應該檢查您的退貨類型，並確保其符合預期。

更新答案：問題實際上出在函數返回值上，該值應該是Observable<HttpEvent<any>> 。 簡單的解決方法是將其投射到any這樣的對象

return <any> next.handle(this.applyCredentials(req))

但是不能保證它會起作用，因為它不屬於正確的類。