更新 Angular 和 RxJS 5 到 6 后编译错误

Question

我在将库更新到新的 Angular 6 和 RxJS 6 后遇到问题。

我有 RouteService class 作为服务工作。它使用 HttpClient 从远程 API 获取数据。更新后，我在尝试编译项目时遇到了一些奇怪的错误。

这是我的服务class:

import {Injectable} from '@angular/core';
import {HttpClient} from "@angular/common/http";
import {Observable} from "rxjs/Rx";
import {catchError} from 'rxjs/operators';

export interface Route {
    name:string;
    route_id:number;
    created_at:Date;
}

@Injectable()
export class RouteService {
    constructor(private http:HttpClient) {}

    getRoutesList():Observable<Route[]> {
        return this.http.get<Route[]>(`http://localhost:8090/api/routes`)
        .pipe(catchError(ServiceUtil.handleError));
    }
}

这里是 handleError 方法：

import {HttpErrorResponse} from '@angular/common/http';
import {ErrorObservable} from 'rxjs/observable/ErrorObservable';

export module ServiceUtil {
    export function handleError(error:HttpErrorResponse) {
        if (error.error instanceof ErrorEvent)
        console.error('An error occurred:', error.error.message);
        else 
        console.error('An error occurred:', JSON.stringify(error.error));    
        return new ErrorObservable(error.error);
    }
}

在 ng serve 之后出现错误：

ERROR in src/app/service/route-service/route.service.ts(21,5): error TS2322: Type 'Observable<{} | Route[]>' is not assignable to type 'Observable<Route[]>'.
Type '{} | Route[]' is not assignable to type 'Route[]'.
    Type '{}' is not assignable to type 'Route[]'.
    Property 'includes' is missing in type '{}'.

Failed to compile.

我做错了什么？我的代码是否有问题导致新版本出错但在旧版本中有效？或者发生了什么变化？

Answer 1

如错误所述。

将您的方法声明更改为：

getRoutesList():Observable<Route[] | {}>

Answer 2

getRoutesList 的某处用户不是预期的 Route[]。

getRoutesList(): Observable<any>

或者把你的错误handlerErrorreturn改成

return Observable.throw(error.error)

Answer 3

我按照 @Riscie 的建议使用了 http 拦截器，它正在工作。

这是我的部分代码：

export class AngularInterceptor implements HttpInterceptor {
    intercept(req:HttpRequest<any>, next:HttpHandler):Observable<HttpEvent<any>> {
        return <any>next.handle(req)
        .pipe(timeout(5000), tap(event => {}, error => {
            if(error == null)
                throw {"message": "Unknown server error", "code": 987};
            else if(error.error != null) {
                if(error.error.code != null)
                    throw error.error;
                else if(error.status != null)
                    throw "message": error.error.error, "code": error.status};          
            }
            else
                throw {"message": error+"", "code": 986}
        }));
    }
}

现在正确吗？

更新 Angular 和 RxJS 5 到 6 后编译错误

Compile error after update Angular and RxJS 5 to 6

rxjs

typescript

angular

angular6

rxjs6