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?

Solution 1

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.

Solution 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:

• Angular IO
• learnrxjs

Comments

[Mirshad]

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'.)"

[veben]

I think you have some wrong packages in node_modules folder. Just delete it and launch npm install

[veben]

You import Observable like that import { Observable } from 'rxjs';, right ?

[Presto]

you have to import Observable from 'rxjs' in [email protected] like this: import { Observable } from 'rxjs';

[rijin]

Both works.. anyway we are importing a single class from rxjs

[Presto]

Both works but your import in [email protected] 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]

I read than all of deprecated things will be remove on version 7

[Chinmoy]

DON'T import { Observable } from 'rxjs/Observable'; USE import { Observable } from 'rxjs';