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:

Solution 1

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

Solution 2

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

2. rxjs/operators: All pipeable operators:

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

3. rxjs/webSocket: The web socket subject implementation

import { webSocket } from 'rxjs/webSocket';

4. rxjs/ajax: The Rx ajax implementation

import { ajax } from 'rxjs/ajax';

5. rxjs/testing: The testing utilities

import { TestScheduler } from 'rxjs/testing';

Solution 3

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.

Solution 4

Just put:

import { Observable} from 'rxjs';

Just like that. Nothing more or less.

Solution 5

You are using RxJS 6. Just replace

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

by

import { Observable, of } from 'rxjs';

View more solutions

Comments

[JB Nizet]

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.

[Thomas Lee]

thx.I'm using Angular6.0 ~

[JB Nizet]

Here's the relevant documentation then: next.angular.io/guide/rx-library. Note that the imports are not the ones you're using.

[David Dahan]

I think this is the best thing to do as rxjs 6 will be supported from Angular 6 only.

[Erty Seidohl]

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.

[cjb110]

how can you 'work this out?' from first hand? searching SO works, but if the library was less well used.

[Prasanna]

i'm also facing same issue, but what if i don't want to use backward compatibility package?

[Zlatko]

Well that was the error he began with, the export is not there.

[Zlatko]

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.

[Levent Divilioglu]

Using 'rxjs' instead of 'rxjs/Observable' just solved my problem. I think, owner of the question should accept your answer.

[Enrico]

What if we don't want to use rxjs-compat?

[William Terrill]

This should be the correct answer. It's not the right answer moving forward... but it's definitely the "right now" answer.

[Sandy]

This will definitely work. But does it also support Tree Shaking?

[EvAlex]

npm install rxjs-compat --save

[PhpCoder]

actually this solved the problem in angular 8 ionic 5

[Jaseem Abbas]

Confirmed! Worked in Angular 9 with Ionic 5.