无法解决 rxjs

Posted 2023-03-07

【中文标题】无法解决 rxjs

【英文标题】：can't Resolve rxjs

【发布时间】：2018-06-25 02:40:48

【问题描述】：

编译失败。

./src/app/hero.service.ts 未找到模块：错误：无法解析 'C:\Users\Admin\angular\myheroes\src\app' 中的 'rxjs/Observable/of'

@ ./src/app/hero.service.ts 13:11-40 
@ ./src/app/app.module.ts 
@ ./src/main.ts 
@ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts

我的 hero.service.ts 代码

import  Injectable  from '@angular/core';
import  Observable  from 'rxjs';
import  of  from 'rxjs/Observable/of';
import  Hero  from './hero';
import  HEROES  from './mock-heroes';
import  MessageService  from './message.service';

@Injectable()
export class HeroService 

   constructor(private messageService: MessageService)  

  getHeroes(): Observable<Hero[]>

  
    // todo: send the message _after_fetching the heroes
    this.messageService.add('HeroService: fetched heroes');
    return of (HEROES);
  

【问题讨论】：

试试这个import 'rxjs/Observable/of';

导入是import of from 'rxjs/observable/of';

小写 observable 而不是 O

感谢您的帮助，它有效

【参考方案1】：

我收到此错误是因为 rxjs 版本较旧，而 Angular 6 需要最新版本的 rxjs。

此命令安装与 Angular 6 兼容的最新版本。

npm install --save rxjs-compat

【讨论】：

请考虑添加解释为什么您认为这将解决 OPs 问题。

对我也有帮助！

我在寻找 rxjs 组件时遇到了依赖问题，这个解决方案对我有用 :) 非常感谢！

【参考方案2】：

正如 Aravind 在他的 cmets 中指出的那样，大小写在这里很重要。而不是

import  of  from 'rxjs/Observable/of';

尝试（不确定版本）...

import  of  from 'rxjs/observable/of';  // note the lower-cased 'o' on 'observable'

或当版本> 6.x时

import  of  from 'rxjs';

根据 Alexander Kim 的评论，我必须敦促人们阅读 documentation，并清楚了解两种主要运算符类型之间的区别：创建者和其他所有类型（主要是转换型）。

另外，请参阅this answer。

Try RxJS now!（打开新的 stackblitz 会话并加载 RxJS 库）

【讨论】：

这是过时的答案。

【参考方案3】：

通常，您的项目中会有一个名为 rxjs-operators.ts 的文件，它会导入您需要的 rxjs 部分。您应该将此行添加到该文件中：

import 'rxjs/add/observable/of';

也取出这一行：

import  of  from 'rxjs/observable/of';

或者，直接将它导入到你的模块中，看看它是否有效。

【讨论】：

我确定您的编辑是出于善意@Delian，但该行直接引用了原始问题中的错误行，需要将其删除。因此，我将其保留为相同的 :)

这似乎也与应该建议的完全相反。 RxJS 5.5.2 和 Angular 5 强烈建议不要以这种方式导入运算符。

【参考方案4】：

对于截至7月13日还活着的人来说，导入of模块的正确方法如下：

import  Observable, of  from 'rxjs';

我很确定，由于访问大写 O 和小写 o 文件夹的命名约定不正确，他们以更全面的方式包含它。

注意：这是出血边缘。 ;)

【讨论】：

它仍然说“'typeof Observable'.ts(2339) 类型上不存在属性'from'”

【参考方案5】：

我有同样的问题，我解决了如下问题...

import  Observable  from 'rxjs/Observable';
import 'rxjs/add/observable/of';

在哪里使用：

Observable.of(something)

注意：请务必查看npm rxjs，在那里您可以找到当前版本的文档

【参考方案6】：

我对 angular/core 和 rxjs 都有同样的错误。 这是我解决问题的方法，明确告诉编译器在哪里可以找到库：

"compilerOptions": 
  "paths":  
    "@angular/*": ["../../node_modules/@angular/*"],
    "rxjs/*": ["../../node_modules/rxjs/*"]
  ,

【讨论】：

你在哪里提到这个？哪个文件？

你应该试试你的配置文件，比如 tsconfig.json

【参考方案7】：

这个问题的答案是矛盾的，这个问题很好，但是没有一个真正有帮助的答案。

这一切都与 Rxjs 自 6.0 版本以来 API 的变化有关

由于 RxJs 的不同版本，这里的答案令人困惑，这就是问题所在。以“这对我有用”开头或结尾的答案是没有用的，因为这不是答案，这是它可能如何工作的一个例子，但你永远没有完整的故事，所以它是无用的，因为它没有解释任何事情.

这里解释得很好： https://academind.com/learn/javascript/rxjs-6-what-changed/ 如果你有 12 分钟，这个 Youtube 也有很好的解释： https://www.youtube.com/watch?v=X9fdpGthrXA

我知道外部链接在 *** 中不受欢迎，这是有充分理由的，虽然知道的不多，但对于简短而有用的答案来说，这是相当多的解释。

简而言之，问题在于 Rxjs API 6.0 之前版本和 RxJs 6.0 之后的差异 如果你想保持6.0之前的代码不变，你应该安装rxjs-compat，它不是很糟糕

更好的是更改代码，并为未来做好准备。

【讨论】：

去年，我通过对这个问题的回答解决了我的问题。

哪个答案？有几个相互矛盾的。

所以有一个答案有帮助，但还有 8 个答案与那个答案相矛盾。你认为这有帮助吗？那个答案对你有用是祝你好运。因为您没有提及您的 RxJs 版本或 Angular 版本，并且答案仅适用于 RxJs 6 之后的版本，但没有提及。其他人是关于 pre RxJs 6 的，也没有提到这一点。所以这就是我认为回答质量不足的原因。这样，问题和答案对任何人都没有帮助。这只是一个令人困惑的混乱。 *** 应该会改善这一点。

是的，你是对的。现在我明白你的意思了。

【参考方案8】：

Angular 7 和 RxJS 6+

import  Observable  from 'rxjs'
import  tap, map, switchMap, catchError  from 'rxjs/operators'

所有操作员现在都在rxjs/operators。

【参考方案9】：

接下来的步骤对我有用。

1) 导入 of 运算符

import 'rxjs/add/observable/of'; 
import  of  from 'rxjs/observable/of'; 

2) 安装 rxjs-compat 包

$ npm i --save rxjs-compat

【参考方案10】：

import  Injectable  from '@angular/core';

import  Observable  from 'rxjs/Observable';

import  of  from 'rxjs/observable/of';

import  Hero  from './hero';

import  HEROES  from './mock-heroes';

始终确保引用文件的顺序应该是正确的。

【参考方案11】：

在我的情况下，由于 webpack.config.js 中 rxjs 的路径，我得到了错误。

我用angular-cli在C盘下创建了项目，我使用ng eject弹出项目并生成webpack.config.js。

实际上 angular-cli 为 rxjs 注入绝对路径，如下所示：

"alias": 
      "rxjs/observable/of": "C:\\my_project_directory\\node_modules\\rxjs\\_esm5\\observable\\of.js"

...

手动修正为相对路径后

"alias": 
      "rxjs/observable/of": "rxjs\\_esm5\\observable\\of.js"

.. 

它开始工作了。

【参考方案12】：

接下来的步骤对我有用。

import  BehaviorSubject  from 'rxjs';