Question

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

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

这是我的服务类：

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>

或者更改错误handlerError返回

return Observable.throw(error.error)

Answer 3

我已经使用http拦截器建议 @Riscie ，并且它正在运行。

这是我的代码的一部分：

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后编译错误

3 个答案: