角度6和RxJS 6重大更改 [英] Angular 6 & RxJS 6 Breaking Changes

问题描述

我已经在谷歌上找到了答案，我找不到解决方法.

I've google the crap out of this and I can't find a solution.

我已经使用类似的代码已有一段时间了. http是有角的HttpClient.

I've been using code like this for some time now. http is the angular HttpClient.

 forgotPassword(email: string): Observable<ApiReturn> {
        const url = `${this.apiURL}/ForgotPassword`;
        const params = {
            email
        };
        return this.http
            .post<ApiReturn>(url, params, this.requestOptions)
            .pipe(catchError(e => this.handleError(e)));
    }

我更新到了最新的Angular 6.x版本和RxJS 6(从5.5开始).现在，代码在抱怨catchError:

I updated to the latest Angular 6.x version and RxJS 6 (from 5.5). Now the code is complaining about the catchError:

"OperatorFunction"类型的参数不能分配给"OperatorFunction"类型的参数. 参数源"和源"的类型不兼容. 不能将可观察"类型分配给可观察"类型.

Argument of type 'OperatorFunction' is not assignable to parameter of type 'OperatorFunction'. Types of parameters 'source' and 'source' are incompatible. Type 'Observable' is not assignable to type 'Observable'.

我的HttpInterceptor现在也无法编译.

My HttpInterceptor is also now failing to compile.

import { Injectable } from '@angular/core';
import {
    HttpEvent,
    HttpInterceptor,
    HttpHandler,
    HttpRequest,
    HttpResponse
} from '@angular/common/http';
import { Log, Level } from 'ng2-logger/client';
import { Observable } from 'rxjs';
import { map, tap } from 'rxjs/operators';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
    constructor() {
    }

    intercept(
        req: HttpRequest<any>,
        next: HttpHandler
    ): Observable<HttpEvent<any>> {
        // Get the auth header from the service.
        // const authHeader = this.global.authenticationToken;
        // Clone the request to add the new header.
        const authReq = req.clone({
            headers: req.headers
                .set('Access-Control-Allow-Origin', window.location.href)
        });
        // Pass on the cloned request instead of the original request.
        return next.handle(authReq);
    }
}

错误:[ts]类型 'import("c:/ProjDotNet/collegebowl-site/node_modules/@ angular/core/node_modules/rxjs/internal/Observable").可观察>> 不可分配给类型 'import("c:/ProjDotNet/collegebowl-site/node_modules/rxjs/internal/Observable").可观察>. 财产类型' 源不兼容.

Error: [ts] Type 'import("c:/ProjDotNet/collegebowl-site/node_modules/@angular/core/node_modules/rxjs/internal/Observable").Observable>' is not assignable to type 'import("c:/ProjDotNet/collegebowl-site/node_modules/rxjs/internal/Observable").Observable>'. Types of property ' source' are incompatible.

基本上是相同的问题.

我收集到了管道功能中缺少的一些基本知识，但是我无法弄清楚或找不到一个正在做我正在做的事的例子.任何帮助将不胜感激.

I gather I'm missing something basic in the pipe function but I can't figure it out or find an example that is doing what I am doing. Any help would be appreciated.

推荐答案

更仔细地查看错误消息.它说

Look more closely at the error message. It says that

import("c:/ProjDotNet/collegebowl-site/node_modules/@angular/core/node_modules/rxjs/internal/Observable").Observable>

和

import("c:/ProjDotNet/collegebowl-site/node_modules/rxjs/internal/Observable").Observable>

是不同的类型.也就是说，实际上您有两种不同的Observable，它们分别来自RxJS的不同副本，这些副本位于文件系统的不同目录中.

are different types. That is, you actually have two different kinds of Observable that come from separate copies of RxJS that reside in different directories in your file system.

也就是说，您的node_modules处于非常奇怪的状态.运行npm ls rxjs或yarn why rxjs可能会产生线索，说明为什么npm/yarn认为两次安装RxJS是一个好主意.

That is, your node_modules is in a very weird state. Running npm ls rxjs or yarn why rxjs might yield clues as to why npm / yarn thought it a good idea to install RxJS twice.

这篇关于角度6和RxJS 6重大更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！