Angular 7 - getting error: 'rxjs has no exported member 'Observable'

Question

This is my package.json file:

"dependencies": {
    "@angular/animations": "~7.1.0",
    "@angular/common": "~7.1.0",
    "@angular/compiler": "~7.1.0",
    "@angular/core": "~7.1.0",
    "@angular/forms": "~7.1.0",
    "@angular/material": "^7.1.1",
    "@angular/platform-browser": "~7.1.0",
    "@angular/platform-browser-dynamic": "~7.1.0",
    "@angular/router": "~7.1.0",
    "core-js": "^2.5.4",
    "ng2-opd-popup": "^1.1.21",
    "rxjs": "~6.3.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"

service.ts file code as below:

import { Injectable } from '@angular/core';
import { Http, Headers} from '@angular/http';
import 'rxjs/add/operator/map';
//import { Observable } from 'rxjs/Observable';
//import   'rxjs/add/observable';
import { Observable} from 'rxjs';
@Injectable({
  providedIn: 'root'
})
export class EmpService {
  employees=[];
  constructor(private _http: Http) { }
  addEmployee(info){
    return this._http.post("http://localhost/data/insert.php",info)
      .map(()=>"");
  }
}

I got the following error:

rxjs has no exported member 'Observable'

Is there any kind of issues in versions?

Yes,installed it before starting the project. node_modules files works well except this case — Mirshad, Dec 17 '18 at 10:07
Possible duplicate of [I get an error when learning Angular."has no exported member 'Observable'"](https://stackoverflow.com/questions/49840152/i-get-an-error-when-learning-angular-has-no-exported-member-observable) — veben, Dec 17 '18 at 10:31

veben · Answer 1 · 2018-12-17T10:34:00.877

5

To be compliant with rxjs6 and angular 7, you have to replace:

import { Http, Headers } from '@angular/http';
import 'rxjs/add/operator/map';

by:

import { map } from 'rxjs/operators';
import { HttpClient, HttpHeaders } from '@angular/common/http';

And import Observable like that:

import { Observable } from 'rxjs';

not like that:

import { Observable } from 'rxjs/Observable';
// or import   'rxjs/add/observable';

You may need to delete node_modules folder and launch npm install, because it seems you have some wrong packages in it.

edited Dec 17 '18 at 10:34

answered Dec 17 '18 at 10:06

veben

19,637
14
60
80

Getting the same error . "(as no exported member 'Observable'. node_modules/rxjs/Observable.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Observable'.)" – Mirshad Dec 17 '18 at 10:12
I think you have some wrong packages in `node_modules` folder. Just delete it and launch `npm install` – veben Dec 17 '18 at 10:14
You import **Observable** like that `import { Observable } from 'rxjs';`, right ? – veben Dec 17 '18 at 10:32

score 2 · Answer 2 · edited Mar 05 '19 at 09:09

2

Your code is written in old angular version. changes required are

1. Use of Http is deprecated
2. importing map & Observable


import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class EmpService {
  employees=[];
  constructor(private _http: HttpClient) { }
  addEmployee(info){
    return this._http.post("http://localhost/data/insert.php",info)
      .pipe(
        map(() => '' )
      )

  }
}

refer:

edited Mar 05 '19 at 09:09

Mike Gledhill

27,846
7
149
159

answered Dec 17 '18 at 11:00

rijin

1,709
12
21

you have to import Observable from 'rxjs' in rxjs@6.3.3 like this: import { Observable } from 'rxjs'; – Presto Jan 30 '19 at 14:05
Both works.. anyway we are importing a single class from rxjs – rijin Jan 31 '19 at 09:34
Both works but your import in rxjs@6.3.3 is really from 'rxjs-compat/Observable'. The good practice is don't import observable from rxjs-compat but use rxjs. The only good reason to use rxjs-compat is if you have dependencies that still rely on an older version of rxjs. – Presto Jan 31 '19 at 09:44
I read than all of deprecated things will be remove on version 7 – Presto Jan 31 '19 at 11:34
DON'T `import { Observable } from 'rxjs/Observable'; ` USE `import { Observable } from 'rxjs'; ` – Chinmoy Apr 09 '19 at 18:49

dream88 · Answer 3 · 2018-12-17T11:22:17.760

Think your issue is related to wrong package, as the way you are doing it is right. The correct way to use Observable in Angular 7 is by import { Observable } from 'rxjs';

Not sure if you upgraded from Angular 6, however, on the upgrade docs:

Switch from HttpModule and the Http service to HttpClientModule and the HttpClient service. HttpClient simplifies the default ergonomics (You don't need to map to json anymore) and now supports typed return values and interceptors. Read more on angular.io

Remove deprecated RxJS 6 features using rxjs-tslint auto update rules

For most applications this will mean running the following two commands:

npm install -g rxjs-tslint rxjs-5-to-6-migrate -p src/tsconfig.app.json

Once you and all of your dependencies have updated to RxJS 6, remove rxjs-compat.

After this has been resolved, run npm install

Another possibility is cached node_modules which can be removed : git rm -r --cached node_modules You may have some So, once this is cleaned, run an npm install and you should have the correct packages.

Angular 7 - getting error: 'rxjs has no exported member 'Observable'

3 Answers3