RxJS 和 AngularFire - 安装了两个版本的 RxJS

Question

问题

我最近升级了我的 Angular 应用程序。我目前正在使用 Angular 12、Firebase 9 和 AngularFire 7 per the recommendations from AngualrFire documentation

ng --version

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1202.13
@angular-devkit/build-angular   12.2.13
@angular-devkit/core            12.2.13
@angular-devkit/schematics      12.2.13
@angular/cdk                    12.2.12
@angular/fire                   7.1.1
@angular/flex-layout            10.0.0-beta.32
@angular/material               12.2.12
@schematics/angular             12.2.13
rxjs                            6.6.7
typescript                      4.3.5

我的代码中存在多个版本的 RxJS 问题。例如，当尝试使用 AngularFire 查询实时数据库时：

import { take } from 'rxjs/operators';

...

this.users$ = this.userKey$.pipe(
  switchMap(userKey => 
    db.list('/users', ref =>
      userKey ? ref.orderByChild('key').equalTo(userKey) : ref
    ).snapshotChanges().pipe(take(1))
  )
);

返回错误：

error TS2345: Argument of type 'MonoTypeOperatorFunction<SnapshotAction<unknown>[]>' is not assignable 
to parameter of type 'OperatorFunction<SnapshotAction<unknown>[], unknown>'.

 ).snapshotChanges().pipe(take(1))
                          ~~~~~~~

疑难解答

我可以通过从 AngularFire 的 node_modules 导入 take 运算符来解决这个问题。但这是一个问题，因为我需要使用我的根 node_modules 文件夹中的 rxjs 安装。

import { take } from '@angular/fire/node_modules/rxjs/operators';

我发现我的项目中安装了两个不同版本的 RxJS。运行npm list rxjs 给了我这个：

vex@11.0.0 /Users/timothydenning/code/lost-creekV2
├─┬ @angular-devkit/architect@0.1202.13
│ └── rxjs@6.6.7 
├─┬ @angular-devkit/build-angular@12.2.13
│ ├─┬ @angular-devkit/build-webpack@0.1202.13
│ │ └── rxjs@6.6.7 
│ ├─┬ inquirer@8.1.2
│ │ └── rxjs@7.4.0 
│ └── rxjs@6.6.7 
├─┬ @angular-devkit/core@12.2.13
│ └── rxjs@6.6.7 
├─┬ @angular/cli@12.2.13
│ ├─┬ @angular-devkit/schematics@12.2.13
│ │ └── rxjs@6.6.7 
│ └─┬ inquirer@8.1.2
│   └── rxjs@7.4.0 
├─┬ @angular/fire@7.1.1
│ └─┬ inquirer@8.2.0
│   └── rxjs@7.4.0 
├─┬ codelyzer@6.0.2
│ └── rxjs@6.6.7 
├─┬ firebase-tools@8.20.0
│ └─┬ inquirer@6.3.1
│   └── rxjs@6.6.7 
├─┬ inquirer@6.5.2
│ └── rxjs@6.6.7 
├─┬ inquirer-autocomplete-prompt@1.4.0
│ └── rxjs@6.6.7 
└── rxjs@6.6.7 

这告诉我从 'rxjs/operators' 的导入来自 RxJS v6.6.7。来自 '@angular/fire/node_modules/rxjs/operators' 的导入来自 RxJS v7.4.0。

我的问题

如何从我的项目中删除rxjs@7.4.0，只留下rxjs@6.6.7？

我尝试过各种方法，例如：

1. 删除 rxjs 7 npm uninstall rxjs@7
2. 清除 node_modules 并重新运行 npm install。
3. 升级到 rxjs 7（这会破坏 angular 12）。
4. 重新安装 rxjs `npm install rxjs@6

@angular/fire 7 具有 RxJs 6 和 7 的对等依赖项 - 所以我应该能够同时使用它们，对吧？

@angular/fire/package.json

"peerDependencies": {
  ...
  "rxjs": "~6.6.0 || ^7.0.0",
  ...
},

Answer 1

你必须指定版本

npm i --save rxjs@6.6.0