Angular - "has no exported member 'Observable'"
AngularTypescriptRxjsAngular6Rxjs6Angular Problem Overview
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:
Angular Solutions
Solution 1 - Angular
This might be helpful in Angular 6 for more info refer this https://github.com/ReactiveX/rxjs/blob/master/docs_app/content/guide/observable.md">Document</a>
- 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';
Solution 2 - Angular
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 3 - Angular
Just put:
import { Observable} from 'rxjs';
Just like that. Nothing more or less.
Solution 4 - Angular
Solution 5 - Angular
You are using RxJS 6. Just replace
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';
by
import { Observable, of } from 'rxjs';
Solution 6 - Angular
Try this:
npm install rxjs-compat --save
Solution 7 - Angular
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
Solution 8 - Angular
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
Solution 9 - Angular
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
Solution 10 - Angular
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);
}
}
Solution 11 - Angular
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",
}
Solution 12 - Angular
You have not installed rxjs library please install
npm install rxjs-compat --save
Solution 13 - Angular
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
Solution 14 - Angular
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
Solution 15 - Angular
use return Observable.of(HEROES);