After trying various imports, I still get the error: Property 'map' does not exist on type 'Observable<Object>'

Question

This question has been asked before, but I have tried the solutions that others have gotten and they do not work for me. I list the solutions I have tried at the bottom of this question.

After trying multiple import variations in my ionic2 application, I still get the error,

Property 'map' does not exist on type 'Observable<Object>'.

when trying to use the map function from rxjs. The following is my code.

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

/*
  Generated class for the LevelTestDataProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class LevelTestDataProvider {

  constructor(public http: HttpClient) {
    console.log('Hello LevelTestDataProvider Provider');
  }

  getRemoteData() {

    this.http.get('PUT JSON URL HERE').map((res: Response) => res.json()).subscribe(data => {
      console.log(data);
    })

  }

}

I have tried the following import statements:

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

import { Observable } from 'rxjs'; // causes an error
import 'rxjs/add/operator/map';

import { Observable } from 'rxjs/Observable';
import 'rxjs/Rx';

import { map } from "rxjs/operators"; // causes an error

import 'rxjs/Rx';

Additionally, I have made sure my Typescript version is up-to-date. It is currently version 2.6.2. I double-checked that my package.json file reflects this version.

UPDATE 1: My RxJS version is 5.5.2

what's your RxJS version?

99tharun
– 99tharun

2018-01-15 14:35:12 +00:00
Commented Jan 15, 2018 at 14:35 — 99tharun
– 99tharun, Commented Jan 15, 2018 at 14:35
My RxJS version is 5.5.2

peachykeen
– peachykeen

2018-01-15 15:02:03 +00:00
Commented Jan 15, 2018 at 15:02 — peachykeen
– peachykeen, Commented Jan 15, 2018 at 15:02

Sumama Waheed · Accepted Answer · 2018-01-15 19:11:21Z

2

Starting from version v5, we are supposed to use

Pipeable Operators

Furthermore, res.json() will not work in Angular's new HttpClient. The res is already a parsed json object.

import { map } from 'rxjs/operators';
import { Observable } from 'rxjs/Observable';

this.http.get('PUT JSON URL HERE')
.pipe(map((res: Response) => {
    return res.json(); // will not work using HttpClient
    return res;
))
.subscribe(data => {
      console.log(data);
})

answered Jan 15, 2018 at 19:11

Sumama Waheed

3,6073 gold badges22 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

peachykeen Over a year ago

Thank you for your help! This is very great. I still have one small issue though. When I run import { map } from 'rxjs/operators'; as you have above, I get 'rxjs/operators' underlined with the error: File '/xxx/xxx/xxx/node_modules/rxjs/operators/index.d.ts' is not a module. Do you know the cause of this?

Sumama Waheed Over a year ago

I would try deleting node_modules and package-lock.json doing an npm install again.

peachykeen Over a year ago

I restarted my text editor and it fixed the problem! Thank you for your help and additional pointers.

Collectives™ on Stack Overflow

After trying various imports, I still get the error: Property 'map' does not exist on type 'Observable<Object>'

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related