Angular 6 和 RxJS 6 重大变化

Posted 2023-03-13

【中文标题】Angular 6 和 RxJS 6 重大变化

【英文标题】：Angular 6 & RxJS 6 Breaking Changes

【发布时间】：2019-02-08 00:22:49

【问题描述】：

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

我使用这样的代码已经有一段时间了。 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”类型的参数。 参数 'source' 和 'source' 的类型不兼容。 类型“Observable”不可分配给类型“Observable”。

我的 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").Observable>'。 财产类型' 源'不兼容。

基本上是同一个问题。

我收集到我在管道函数中缺少一些基本的东西，但我无法弄清楚或找到一个正在做我正在做的事情的例子。任何帮助将不胜感激。

【参考方案1】：

仔细查看错误消息。它说

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 是个好主意。

【讨论】：

Meriton - 感谢您的帮助。当我看到这个时，我做了我应该做的事情。 ol' 是否吹走了 node_modules 和 package-lock.json 并重新安装。修复了所有问题。

这是由于复制和粘贴来自不同项目的代码.. 至少对我来说是

【参考方案2】：

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

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

【讨论】：

谢谢它真的很好用！只需添加您必须为paths 定义baseUrl 选项才能工作。