Angular 6和RxJS 6重大更改

Question

我已经用谷歌搜索了这个垃圾，我找不到解决方案。

我一直在使用这样的代码已有一段时间了。http是有角的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了：

类型“ OperatorFunction”的参数不能分配给类型“ OperatorFunction”的参数。参数“源”和“源”的类型不兼容。类型“可观察”不能分配给类型“可观察”。

我的HttpInterceptor现在也无法编译。

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”）。Observable>'不可分配为类型import（“ c： / ProjDotNet / collegebowl-site / node_modules / rxjs / internal / Observable“）。可观察>。属性“源”的类型不兼容。

基本上是一样的问题。

我发现我在管道功能中缺少一些基本的东西，但是我无法弄清楚它，也找不到找到正在做我自己的事的例子。任何帮助，将不胜感激。

Answer 1

就像@meriton 所说的那样，这是因为您在多个 node_modules 中有多个 rxjs 实例。我发现的最佳解决方案是在 tsconfig.json 中添加一个别名，以强制在任何地方使用相同的 rxjs：

"compilerOptions": {
  "paths": {
      "rxjs": [
        "node_modules/rxjs"
      ],
      "rxjs/*": [
        "node_modules/rxjs/*"
      ]
   }
}

Answer 2

仔细查看错误消息。它说

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的不同副本，它们分别位于文件系统的不同目录中。

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