无法解析 rxjs

Question

编译失败

./src/app/hero.service.ts Module not found: Error: Can't resolve 'rxjs/Observable/of' in 'C:\Users\Admin\angular\myheroes\src\app'
@ ./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);
  }
}

Answer 1

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

import 'rxjs/add/observable/of';

也去掉这一行：

import { of } from 'rxjs/observable/of';

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

Answer 2

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';

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

Answer 3

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

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，并弄清楚两种主要运算符类型之间的区别：创建者和其他所有内容（主要是转换）。

另请参阅。

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

Answer 4

我遇到了同样的问题，我按如下方式解决了问题...

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

用在什么地方：

Observable.of(something)

注意：重要的是要经常查看 npm rxjs，您可以在那里找到当前版本的文档

Answer 5

在我的例子中，由于 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"

.. }

它开始工作了。

Answer 6

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

import { Observable, of } from 'rxjs';

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

注意：这是血淋淋的边缘。 ;)

Answer 7

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

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

Answer 8

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

此命令安装与 Angular 6.

兼容的最新版本

npm install --save rxjs-compat

Answer 9

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

这一切都与 Rxjs 从 6.0

版本以来 API 的变化有关

这里的答案很混乱，因为RxJs 的版本不同，这就是问题所在。以 "This works for me" 开头或结尾的答案是无用的，因为那不是答案，那只是它可能如何工作的一个例子，但你永远不会有完整的故事，所以它是无用的，因为它没有解释任何东西。

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

我知道外部链接在 Whosebug 中不受重视，这是有充分理由的，虽然不是很了解，但对于一个简短而有用的答案来说，这是相当多的解释。

所以简而言之，恢复，问题与版本 6.0 之前的 Rxjs API 和 RxJs 6.0 之后的差异有关如果你想保持6.0之前的代码不变，你应该安装rxjs-compat，这不是很糟糕

最好是更改代码，并为将来做好准备。

Answer 10

Angular 7 和 RxJS 6+

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

所有运营商现在都在rxjs/operators。

Answer 11

接下来的步骤适合我。

1) 导入 of 运算符

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

2) 安装 rxjs-compat 包

$ npm i --save rxjs-compat

Answer 12

接下来的步骤适合我。

import { BehaviorSubject } from 'rxjs';

无法解析 rxjs

can't Resolve rxjs

npm

node-modules

angular