从 Rxjs Angular 13 和 allowedCommonJsDependencies 数组导入 takeUntill答案

【问题标题】：Import takeUntill from Rxjs Angular 13 and allowedCommonJsDependencies array从 Rxjs Angular 13 和 allowedCommonJsDependencies 数组导入 takeUntill
【发布时间】：2021-12-13 11:48:21
【问题描述】：

我对 rxjs (v6) 和 commmonJsDependencies 有疑问。

我尝试导入 takeUntil 并将 JSDependeciy 附加到 angular.json allowedCommonJsDependencies 数组。

我总是看到错误：

Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/Users/d/angular/node_modules/rxjs/operators' is not supported resolving ES modules imported from /Users/d/angular/node_modules/@angular/core/fesm2015/core.mjs
Did you mean to import rxjs/operators/index.js

我试过了：

import { takeUntil } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { takeUntil } from 'rxjs/operators/index';

和 allowedCommonJsDependencies：

rxjs
rxjs/运营商
rxjs/operators/index

.ts 文件和 .json 配置文件中应该有什么？

编辑：我用的是es2015

src/tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "",
    "declaration": false,
    "experimentalDecorators": true,
    "lib": ["es6", "dom"],
    "mapRoot": "./",
    "module": "es6",
    "moduleResolution": "node",
    "outDir": "../dist/out-tsc",
    "sourceMap": true,
    "target": "es2015",
    "typeRoots": [
      "../node_modules/@types"
    ]
  }
}

"@angular/animations": "13.1.0", "@angular/cdk": "^13.0.3", "@angular/common": "13.1.0", "@angular/compiler": "13.1.0", "@angular/core": "13.1.0", "@angular/forms": "13.1.0", "@angular/platform-browser": "13.1.0", "@angular/platform-browser-dynamic": "13.1.0", "@angular/platform-server": "13.1.0", "@angular/router": "13.1.0",

"rxjs": "6.6.7", “打字稿”：“4.4.4”

即使我摆脱了每个rxjs/operators，我仍然有同样的错误：rxjs/operators' is not supported resolving ES modules imported from ...

（我将rxjs/operators替换为rxjs/internal/operators）

【问题讨论】：

你不需要在 angular.json 中添加rxjs，还是添加了其他东西？
@Batajus 我想向 angular.json 添加一个模块，因为 [link]angular.io/guide/build#configuring-commonjs-dependencies 如果没有这个声明，我会看到一个警告（这只是一个警告，但也许最好去掉它）：/my-component.component.ts depends on 'rxjs/operators/index'. CommonJS or AMD dependencies can cause optimization bailouts.
我通过简单的 ng serve 看到了这个警告，但是当我运行 ssr 时，我看到了 Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/Users/d/angular/node_modules/rxjs/operators' is not supported resolving ES modules imported from /Users/d/angular/node_modules/@angular/core/fesm2015/core.mjs Did you mean to import rxjs/operators/index.js
你能分享你的 Angular 和 Typescript 版本，可能还有你的 tsconfig.json
@Batajus 当然，我更新了问题描述

标签： angular rxjs

【解决方案1】：

就我而言，唯一的解决方案是将 RXJS 升级到 7.4。

【讨论】：