Reputation: 2777

Angular - "has no exported member 'Observable'"

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:

Upvotes: 186

Answers (15)

hash

Reputation: 5416

Just Run

npm i rxjs-compat

this works for me.

Upvotes: 0

Sanjeet kumar

Reputation: 3441

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

Upvotes: 229

Vinayak Shedgeri

Reputation: 2392

You have not installed rxjs library please install

npm install rxjs-compat --save

Upvotes: 1

Yogesh Kumar

Reputation: 1046

Try this:

npm install rxjs-compat --save

Upvotes: 36

rtrigo

Reputation: 529

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]

Upvotes: 0

Jackie

Reputation: 336

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

Upvotes: 13

Blasanka

Reputation: 22447

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

Upvotes: 4

veben

Reputation: 22332

You are using RxJS 6. Just replace

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

import { Observable, of } from 'rxjs';

Upvotes: 36

Manoj Gupta

Reputation: 474

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

Upvotes: 2

sebbab

Reputation: 1056

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

Upvotes: 0

pau

Reputation: 1493

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.

Upvotes: 135

Marius Mielcarek

Reputation: 1239

Just put:

import { Observable} from 'rxjs';

Just like that. Nothing more or less.

Upvotes: 123

Mark Mishaev

Reputation: 31

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

Upvotes: 2