Angular - "has no exported member 'Observable'"

Question

Typescript code:

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

@Injectable({
  providedIn: 'root'
})
export class HeroService {

  constructor() { }

  getHeroes(): Observable<Hero[]> {
    return of(HEROES);
  }

}

error info:

error TS2307: Cannot find module 'rxjs-compat/Observable'. node_modules/rxjs/observable/of.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/observable/of'. src/app/hero.service.ts(2,10): error TS2305: Module '"F:/angular-tour-of-heroes/node_modules/rxjs/Observable"' has no exported member 'Observable'. src/app/hero.service.ts(15,12): error TS2304: Cannot find name 'of'.

package.json file with Angular version:

The framework you're using is named Angular. AngularJS is a different framework. — JB Nizet, Apr 15 '18 at 08:51
It seems you're using RxJS 6. The imports need to be changed when using that version (see the release notes). If you're not using Angular 6, then you should stick with RxJS 5. — JB Nizet, Apr 15 '18 at 08:54
Here's the relevant documentation then: https://next.angular.io/guide/rx-library. Note that the imports are not the ones you're using. — JB Nizet, Apr 15 '18 at 09:07

Sanjeet kumar · Answer 1 · 2021-06-29T07:53:50.793

225

This might be helpful in Angular 6 for more info refer this Document

rxjs: Creation methods, types, schedulers and utilities

import { Observable, Subject, asapScheduler, pipe, of, from, interval, merge, fromEvent } from 'rxjs';

rxjs/operators: All pipeable operators:

import { map, filter, scan } from 'rxjs/operators';

rxjs/webSocket: The web socket subject implementation

import { webSocket } from 'rxjs/webSocket';

rxjs/ajax: The Rx ajax implementation

import { ajax } from 'rxjs/ajax';

rxjs/testing: The testing utilities

import { TestScheduler } from 'rxjs/testing';

edited Jun 29 '21 at 07:53

answered May 05 '18 at 22:38

Sanjeet kumar

3,333
3
17
26

4

how can you 'work this out?' from first hand? searching SO works, but if the library was less well used. – cjb110 May 29 '18 at 07:46
14

npm install rxjs-compat --save – EvAlex Dec 18 '18 at 06:54

score 135 · Answer 2 · answered Jun 02 '18 at 22:14

135

Apparently (as you point in the error log), after updating to Angular 6.0.0 rxjs-compat is missing.

Run npm install rxjs-compat --save to install. Should fix it.

answered Jun 02 '18 at 22:14

pau

1,493
1
10
9

3

i'm also facing same issue, but what if i don't want to use backward compatibility package? – Prasanna Jun 07 '18 at 09:43
3

What if we don't want to use rxjs-compat? – Enrico Aug 14 '18 at 15:25
3

This should be the correct answer. It's not the right answer moving forward... but it's definitely the "right now" answer. – William Terrill Sep 06 '18 at 20:12

score 123 · Answer 3 · edited May 26 '18 at 23:53

123

Just put:

import { Observable} from 'rxjs';

Just like that. Nothing more or less.

edited May 26 '18 at 23:53

craigcaulfield

3,381
10
32
40

answered May 26 '18 at 22:06

Marius Mielcarek

1,239
1
6
2

11

Using 'rxjs' instead of 'rxjs/Observable' just solved my problem. I think, owner of the question should accept your answer. – Levent Divilioglu Jul 06 '18 at 23:21
1

This will definitely work. But does it also support Tree Shaking? – Sandy Dec 11 '18 at 18:03

score 64 · Accepted Answer · answered Apr 15 '18 at 09:31

64

I replaced the original code with import { Observable, of } from 'rxjs', and the problem is solved.

answered Apr 15 '18 at 09:31

Thomas Lee

2,757
2
11
13

score 36 · Answer 5 · answered Aug 12 '18 at 09:56

36

You are using RxJS 6. Just replace

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

by

import { Observable, of } from 'rxjs';

answered Aug 12 '18 at 09:56

veben

19,637
14
60
80

score 36 · Answer 6 · edited Apr 18 '19 at 10:39

36

Try this:

npm install rxjs-compat --save

edited Apr 18 '19 at 10:39

Zoe

27,060
21
118
148

answered Apr 17 '19 at 05:08

Yogesh Kumar

1,016
11
10

score 13 · Answer 7 · edited Nov 18 '18 at 13:55

13

What helped me is:

Get rid of all old import paths and replace them with new ones like this:

import { Observable , BehaviorSubject } from 'rxjs';)
Delete node_modules folder
npm cache verify
npm install

edited Nov 18 '18 at 13:55

Vega

27,856
27
95
103

answered Sep 08 '18 at 10:29

Jackie

327
2
13

score 7 · Answer 8 · answered May 01 '18 at 21:10

7

I had a similar issue. Back-revving RXJS from 6.x to the latest 5.x release fixed it for Angular 5.2.x.

Open package.json.

Change "rxjs": "^6.0.0", to "rxjs": "^5.5.10",

run npm update

answered May 01 '18 at 21:10

Matthew Smith

1,287
1
9
19

1

I think this is the best thing to do as rxjs 6 will be supported from Angular 6 only. – David Dahan May 03 '18 at 13:21

Blasanka · Answer 9 · 2018-10-08T10:53:44.767

4

Just remove /Observable from 'rxjs/Observable';

If you then get Cannot find module 'rxjs-compat/Observable' just put below line to thr terminal and press enter.

npm install --save rxjs-compat

edited Oct 08 '18 at 10:53

answered Oct 08 '18 at 10:47

Blasanka

21,001
12
102
104

score 2 · Answer 10 · answered May 26 '18 at 07:28

My resolution was adding the following import: import { of } from 'rxjs/observable/of';

So the overall code of hero.service.ts after the change is:

import { Injectable } from '@angular/core';
import { Hero } from './hero';
import { HEROES } from './mock-heroes';
import { of } from 'rxjs/observable/of';
import {Observable} from 'rxjs/Observable';

@Injectable()
export class HeroService {

  constructor() { }

  getHeroes(): Observable<Hero[]> {
    return of(HEROES);
  }
}

Well that was the error he began with, the export is not there. — Zlatko, Jun 26 '18 at 09:15

score 2 · Answer 11 · edited Aug 03 '18 at 09:36

2

The angular-split component is not supported in Angular 6, so to make it compatible with Angular 6 install following dependency in your application

To get this working until it's updated use:

"dependencies": {
"angular-split": "1.0.0-rc.3",
"rxjs": "^6.2.2",
    "rxjs-compat": "^6.2.2",
}

edited Aug 03 '18 at 09:36

dustinroepsch

1,122
1
7
24

answered Aug 03 '18 at 07:38

Manoj Gupta

456
4
9

score 1 · Answer 12 · answered Jun 04 '21 at 11:02

1

You have not installed rxjs library please install

npm install rxjs-compat --save

answered Jun 04 '21 at 11:02

Vinayak Shedgeri

2,222
1
21
24

score 0 · Answer 13 · answered Jul 03 '18 at 15:52

0

In my case this error was happening because I had an old version of ng cli in my computer.

The problem was solved after running:

ng update

ng update @angular/cli

answered Jul 03 '18 at 15:52

sebbab

847
8
13

score 0 · Answer 14 · answered Feb 05 '19 at 16:17

Update angular-in-memory-web-api version. The default angular-in-memory-web-api version installed during the tutorial angular-tour-of-heroes was 0.4. It worked like a charm in my case. (Using Angular 7 with RxJS 6)

npm i angular-in-memory-web-api@0.8.0

score 0 · Answer 15 · answered Jun 03 '22 at 00:08

0

Just Run

npm i rxjs-compat

this works for me.

answered Jun 03 '22 at 00:08

hash

5,336
7
36
59

score -3 · Answer 16 · edited May 25 '18 at 13:05

-3

use return Observable.of(HEROES);

edited May 25 '18 at 13:05

Neuron

5,141
5
38
59

answered May 25 '18 at 12:35

Dominik Ernst

11
2

1

While this answer is probably correct and useful, it is preferred if you include some explanation along with it to explain how it helps to solve the problem. This becomes especially useful in the future, if there is a change (possibly unrelated) that causes it to stop working and users need to understand how it once worked. – Erty Seidohl May 25 '18 at 16:09
If you read the question carefully, you'll see mentions of Angular **6** and rxjs **6**, not 5. This problem is specific for rxjs v6+, while the solution you posted is related to rxjs (and Angular) v5. – Zlatko Jun 26 '18 at 09:17

Angular - "has no exported member 'Observable'"

16 Answers16

Linked