can't Resolve rxjs

Question

Failed to compile.

./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

my code for 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);
  }
}

try this `import 'rxjs/Observable/of';` – Sachin Jan 16 '18 at 13:19 — Sachin, Jan 16 '18 at 13:19
The import is `import { of } from 'rxjs/observable/of';` – LLai Jan 16 '18 at 14:21 — LLai, Jan 16 '18 at 14:21
lower case `observable` instead of `O` – Aravind Jan 16 '18 at 14:25 — Aravind, Jan 16 '18 at 14:25

Vedha Peri · Answer 1 · 2018-07-25T15:45:29.013

61

I got this error because of an older version of rxjs and Angular 6 needs the latest version of rxjs.

This command installs the latest version that is compatible with Angular 6.

npm install --save rxjs-compat

edited Jul 25 '18 at 15:45

answered Jul 24 '18 at 15:39

Vedha Peri

1,386
2
12
11

4

Please consider adding an explanation why you think this will solve the OPs problem. – Mr. T Jul 24 '18 at 15:57
1

Worked me as well! – Nagesh Aug 23 '18 at 11:45
3

I had problems with a dependency looking for an rxjs component, and this solution worked for me :) Thanks a lot! – Drago96 Dec 05 '18 at 09:11

Adam Cox · Answer 2 · 2020-07-11T18:54:11.680

As Aravind has pointed out in his comments, case is important here. Instead of

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

try (unsure the version)...

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

or when version is > 6.x

import { of } from 'rxjs';

Based on Alexander Kim's comment, I must urge folks to go read the documentation, and get clear around the distinction between the 2 major operator types: creator, and everything else (mostly trans-formative).

Also, see this answer.

Try RxJS now! (opens new stackblitz session with RxJS library loaded)

This is outdated answer. – Alexander Kim May 13 '19 at 13:35 — Alexander Kim, May 13 '19 at 13:35

score 11 · Accepted Answer · edited Feb 08 '18 at 16:16

11

Usually you will have a file in your project called something like rxjs-operators.ts which imports the parts of rxjs that you need. You should add this line to that file:

import 'rxjs/add/observable/of';

Also take out this line:

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

Alternatively, import it into your module directly, see if it works.

edited Feb 08 '18 at 16:16

Deilan

4,740
3
39
52

answered Jan 16 '18 at 14:21

Steve D

587
8
18

I'm sure your edit was with good intentions @Delian, but that line directly referenced the incorrect line from the original question, which needed to be removed. Hence I left it identical :) – Steve D Mar 13 '18 at 21:48
1

This also seems to be the exact opposite of what should be suggested. RxJS 5.5.2 and version 5 of Angular strongly suggests getting away from importing operators this way. – Jake Smith Mar 23 '18 at 21:02

score 11 · Answer 4 · answered Jul 13 '18 at 05:49

11

For those of you who are alive as of July 13th, the correct way for importing the of module is as follows:

import { Observable, of } from 'rxjs';

I am pretty sure because of the improper naming conventions accessing a capital O and a lower case o folder, they included it in a more all encompassing manner.

Note: THIS IS THE BLEEDING EDGE. ;)

answered Jul 13 '18 at 05:49

abejdaniels

459
6
15

It still says "Property 'from' does not exist on type 'typeof Observable'.ts(2339)" – Veronica Dec 16 '19 at 00:26

score 3 · Answer 5 · answered Feb 22 '18 at 16:12

I have the same problem and I fixed the problem like follows...

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

Where is used:

Observable.of(something)

Note: Important to take a look always in npm rxjs, there you can find the documentation for the current version

score 3 · Answer 6 · answered Jul 20 '18 at 07:29

3

I have the same error for both angular/core and rxjs. This is the way I fix the issue, by explicitly saying to the compiler where to find the library :

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

answered Jul 20 '18 at 07:29

Alain

98
6

where do you mention this? WHich file? – Veronica Dec 16 '19 at 00:28
1

you should try your config file such as tsconfig.json – Alain Jan 23 '20 at 09:02

Bert Verhees · Answer 7 · 2019-01-28T12:22:30.190

2

The answers on this question are contradictory, the question is good, but there is no answer that is really helping.

It all has to do with the change of API from Rxjs since version 6.0

The answers here are confusing because of the different versions of RxJs, that is the problem. An answer starting or ending with: "This works for me" is useless, because that is not an answer, that is an example how it might work, but you never have the full story, so it is useless because it does not explain anything.

It is all very well explained here: https://academind.com/learn/javascript/rxjs-6-what-changed/ If you have 12 minutes, it is also well explained in this Youtube: https://www.youtube.com/watch?v=X9fdpGthrXA

I know that external links are not appreciated in StackOverflow, and with good reason, and although it is not very much to know, it is quite some explanation for a short and helpful answer.

So in short, resuming, the problem has to do with differences between the Rxjs API before version 6.0 and since RxJs 6.0 If you want to keep the pre-6.0 code unchanged, you should install rxjs-compat, it is not very bad

Better is to change the code, and have an up to date and ready for the future.

edited Jan 28 '19 at 12:22

answered Jan 28 '19 at 08:56

Bert Verhees

1,057
3
14
25

1

last year, I have solved my problems by answers which are given to this question. – Bhavin Jan 29 '19 at 05:20
Which answer? There are a few contradicting each other. – Bert Verhees Jan 29 '19 at 08:29
So there was one answer helpful, but there were 8 more, contradicting that one. Do you think that is helpful? That that answer worked for you is good luck. Because you did not mention your RxJs version or Angular version, and the answer is only applicable for RxJs past version 6, but it does not mention that. Others are about pre RxJs 6 and also do not mention that. So that is what I see as lack of quality in answering. In this way, the question and the answers are helping noone. It is just a confusing mess. StackOverflow should improve this. – Bert Verhees Jan 30 '19 at 06:32
Yes, you are right. Now I am understand what you mean to say. – Bhavin Jan 30 '19 at 06:46

score 2 · Answer 8 · answered May 13 '19 at 14:15

2

Angular 7 and RxJS 6+

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

All operators are now in rxjs/operators.

answered May 13 '19 at 14:15

Alexander Kim

17,304
23
100
157

score 2 · Answer 9 · answered May 24 '19 at 14:59

2

The next steps work for me.

1) Import of operator

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

2) Install rxjs-compat package

$ npm i --save rxjs-compat

answered May 24 '19 at 14:59

ame

773
9
21

score 1 · Answer 10 · edited Feb 12 '18 at 08:18

1

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

Always make sure that order of referencing the files should be in a correct order.

edited Feb 12 '18 at 08:18

tuomastik

4,559
5
36
48

answered Feb 12 '18 at 07:34

DIBYA RANJAN TRIPATHY

264
3
5

score 1 · Answer 11 · edited Dec 20 '18 at 08:52

In my case, I got the error because of the path of rxjs in webpack.config.js.

I created the project under C drive with angular-cli and I used ng eject to eject the project and generate the webpack.config.js.

Actually angular-cli inject an absolute path for rxjs like below:

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

...}

After manually correcting it to a relative path

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

.. }

It started working.

score 0 · Answer 12 · answered Sep 10 '20 at 19:04

0

The next steps work for me.

import { BehaviorSubject } from 'rxjs';

answered Sep 10 '20 at 19:04

mruanova

6,351
6
37
55

can't Resolve rxjs

12 Answers12

Linked