Angular - “has no exported member 'Observable'”

173
votes

code

error info

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:

version

15
angulartypescriptrxjsangular6rxjs6
The framework you're using is named Angular. AngularJS is a different framework. - JB Nizet
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
thx.I'm using Angular6.0 ~ - Thomas Lee
Here's the relevant documentation then: next.angular.io/guide/rx-library. Note that the imports are not the ones you're using. - JB Nizet

15 Answers

217
votes

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

  1. rxjs: Creation methods, types, schedulers and utilities
import { Observable, Subject, asapScheduler, pipe, of, from, interval, merge, fromEvent } from 'rxjs';
  1. rxjs/operators: All pipeable operators:
import { map, filter, scan } from 'rxjs/operators';
  1. rxjs/webSocket: The web socket subject implementation
import { webSocket } from 'rxjs/webSocket';
  1. rxjs/ajax: The Rx ajax implementation
import { ajax } from 'rxjs/ajax';
  1. rxjs/testing: The testing utilities
import { TestScheduler } from 'rxjs/testing';
127
votes

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.

115
votes

Just put:

import { Observable} from 'rxjs';

Just like that. Nothing more or less.

61
votes

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

enter image description here

enter image description here

35
votes

You are using RxJS 6. Just replace 

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

by

import { Observable, of } from 'rxjs';
32
votes

Try this:

npm install rxjs-compat --save
12
votes

What helped me is:

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

    import { Observable , BehaviorSubject } from 'rxjs';)

  2. Delete node_modules folder

  3. npm cache verify
  4. npm install
7
votes

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

4
votes

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
2
votes

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);
  }
}
2
votes

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",
}
0
votes

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

0
votes

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 [email protected]
0
votes

You have not installed rxjs library please install

npm install rxjs-compat --save

-3
votes

use return Observable.of(HEROES);