Property 'map' does not exist on type 'Observable'

Question

I am trying to call an API from Angular but am getting this error:

Property 'map' does not exist on type 'Observable<Response>'

The answers from this similar question didn't solve my issue: Angular 2 beta.17: Property 'map' does not exist on type 'Observable<Response>'.

I am using Angular 2.0.0-beta.17.

Answer 1

You need to import the map operator:

import 'rxjs/add/operator/map'

Or more generally:

import 'rxjs/Rx';

---

Notice: For versions of RxJS 6.x.x and above, you will have to use pipeable operators as shown in the code snippet below:

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

// ...
export class MyComponent {
  constructor(private http: HttpClient) { }
  getItems() {
    this.http.get('https://example.com/api/items').pipe(map(data => {})).subscribe(result => {
      console.log(result);
    });
  }
}

This is caused by the RxJS team removing support for using See the breaking changes in RxJS' changelog for more info.

From the changelog:

operators: Pipeable operators must now be imported from rxjs like so: import { map, filter, switchMap } from 'rxjs/operators';. No deep imports.

Answer 2

Revisiting this because my solution isn't listed here.

I am running Angular 6 with rxjs 6.0 and ran into this error.

Here's what I did to fix it:

I changed

map((response: any) => response.json())

to simply be:

.pipe(map((response: any) => response.json()));

I found the fix here:

https://github.com/angular/angular/issues/15548#issuecomment-387009186

Answer 3

Just write this command in the VS Code terminal of your project and restart the project.

npm install rxjs-compat

You need to import the map operator by adding this:

import 'rxjs/add/operator/map';

Answer 4

For the Angular 7v

Change

import 'rxjs/add/operator/map';

To

import { map } from "rxjs/operators"; 

And

 return this.http.get('http://localhost/ionicapis/public/api/products')
 .pipe(map(res => res.json()));

Answer 5

I had the same issue with Angular 2.0.1 because I was importing Observable from

import { Observable } from 'rxjs/Observable';

I resolve my problem on importing Observable from this path instead

import { Observable } from 'rxjs';

Answer 6

In rxjs 6 map operator usage has been changed now you need to Use it like this.

import { map } from 'rxjs/operators';
myObservable
  .pipe(map(data => data * 2))
  .subscribe(...);

For reference https://www.academind.com/learn/javascript/rxjs-6-what-changed/#operators-update-path

Answer 7

In new version of httpClient module in angular, you have not yet to write it this way:

return this.http.request(request)
      .map((res: Response) => res.json());

but do it this way:

return this.http.request(request)
             .pipe(
               map((res: any) => res.json())
             );

Answer 8

In the latest Angular 7.*.*, you can try this simply as:

import { Observable, of } from "rxjs";
import { map, catchError } from "rxjs/operators";

And then you can use these methods as follows:

   private getHtml(): Observable<any> {
    return this.http.get("../../assets/test-data/preview.html").pipe(
      map((res: any) => res.json()),
      catchError(<T>(error: any, result?: T) => {
        console.log(error);
        return of(result as T);
      })
    );
  }

Check this demo for more details.

Answer 9

just install rxjs-compat by typing in terminal:

npm install --save rxjs-compat

then import :

import 'rxjs/Rx';

Answer 10

import { map } from "rxjs/operators";

getGetFunction(){
this.http.get('http://someapi')
.pipe(map(res => res));
}

getPostFunction(yourPara){
this.http.get('http://someapi',yourPara)
.pipe(map(res => res));
}

In above function you can see i didn't use res.json() since im using HttpClient. It applies res.json() automatically and returns Observable (HttpResponse < string>). You no longer need to call this function yourself after angular 4 in HttpClient.

Answer 11

In my case it wouldn't enough to include only map and promise:

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';

I solved this problem by importing several rxjs components as official documentation recommends:

1) Import statements in one app/rxjs-operators.ts file:

// import 'rxjs/Rx'; // adds ALL RxJS statics & operators to Observable

// See node_module/rxjs/Rxjs.js
// Import just the rxjs statics and operators we need for THIS app.

// Statics
import 'rxjs/add/observable/throw';

// Operators
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/toPromise';

2) Import rxjs-operator itself in your service:

// Add the RxJS Observable operators we need in this app.
import './rxjs-operators';

Answer 12

In Angular v10.x and rxjs v6.x

First import map top of my service,

import {map} from 'rxjs/operators';

Then I use map like this

return this.http.get<return type>(URL)
  .pipe(map(x => {
    // here return your pattern
    return x.foo;
  }));

Answer 13

I had the same issue, I was using Visual studio 2015 which had an older version of typescript.

After upgrading the extension the issue got resolved.

Download Link

Answer 14

I am using Angular 5.2 and when I use import 'rxjs/Rx'; it throws me the following lint error: TSLint: This import is blacklisted, import a submodule instead (import-blacklist)

See the screenshot below:

SOLUTION: Solved it by importing only the operators that I needed. Example follows:

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

So the fix would be to import specifically only the necessary operators.

Answer 15

I too faced the same error. One solution that worked for me was to add the following lines in your service.ts file instead of import 'rxjs/add/operator/map':

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

For an example, my app.service.ts after debugging was like,

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

@Injectable()
export class AppService {
    constructor(private http: HttpClient) {}
    getData(): Observable<any> {
        return this.http.get('https://samples.openweathermap.org/data/2.5/history/city?q=Warren,OH&appid=b6907d289e10d714a6e88b30761fae22')
        .pipe(map(result => result));
    }
}

Answer 16

Simply install rxjs-compat to solve the problem

npm i rxjs-compat --save-dev

And import it like below

import 'rxjs/Rx';

Answer 17

First of all run installation as below:

npm install --save rxjs-compat@6

Now you need to import rxjs in service.ts:

import 'rxjs/Rx'; 

Voila! The problem has been fixed.

Answer 18

simply run npm install --save rxjs-compat it fixes the error.

It is recommended here

Answer 19

I tried all the possible answers posted above none of them worked,

I resolved it by simply restarting my IDE i.e., Visual Studio Code

May it helps someone.

Answer 20

Use the map function in pipe function and it will solve your problem. You can check the documentation here.

this.items = this.afs.collection('blalal').snapshotChanges().pipe(map(changes => {
  return changes.map(a => {
    const data = a.payload.doc.data() as Items;
    data.id = a.payload.doc.id;
    return data;
  })
})

Answer 21

If after importing import 'rxjs/add/operator/map' or import 'rxjs/Rx' too you are getting the same error then restart your visual studio code editor, the error will be resolved.

Answer 22

for all those linux users that are having this problem, check if the rxjs-compat folder is locked. I had this exact same issue and I went in terminal, used the sudo su to give permission to the whole rxjs-compat folder and it was fixed. Thats assuming you imported

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch'; 

in the project.ts file where the original .map error occurred.

Answer 23

npm install rxjs@6 rxjs-compat@6 --save

Answer 24

Thanks to https://github.com/nagamallabhanu

https://github.com/webmaxru/pwa-workshop-angular/issues/2#issuecomment-395024755

encapsulating

pipe(map(....))

worked

import { map } from 'rxjs/operators';

courseRef: AngularFireList<any>;
courses$: Observable<any[]>;

this.courseRef = db.list('/tags');
  this.courses$ = this.courseRef.snapshotChanges()
  .pipe(map(changes => {
      return changes.map(c => ({ key: c.payload.key, ...c.payload.val() 
  }));
 }));
 this.courses$.subscribe(res=>{
   console.log(res)
 })

Answer 25

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

  @Injectable({
  providedIn: 'root'
  })
  export class RestfulService {

  constructor(public http: Http) { }

 //access apis Get Request 
 getUsers() {
 return this.http.get('http://jsonplaceholder.typicode.com/users')
  .map(res => res.json());
  }

 }

run the command

 npm install rxjs-compat 

I just import

 import 'rxjs/add/operator/map';

restart the vs code, issue solved.

Answer 26

Angular 9:

 forkJoin([
  this.http.get().pipe(
    catchError((error) => {
      return of([]);
    })
  ),
  this.http.get().pipe(
    catchError((error) => {
      return of([]);
    })
  ),

Answer 27

If you are using this old way to get route params

 this._route.params
        .map(params => params['id'])

To updated it for new rxjs version

First, import the map from rxjs operators.

import { map } from 'rxjs/operators';

Second add pipe,

   this._route.params.pipe(
            map(params => params['id']))

Answer 28

i have same problem i solve it as follow

import { map } from 'rxjs/operators'; // imports statement 

return this.auth.user$.pipe(
  map(user =>{
    if(user) return true;
        this.router.navigate(['/login'], { queryParams: {returnUrl :state.url}});
    return false;
  }));
}

There was a problem with observable type which was null so i add type any and it helped to clear many errors

user$: Observable<firebase.User | any>;

Answer 29

The angular new version does not support .map you have to install this through cmd npm install --save rxjs-compat via this you can enjoy with old technique . note: don't forget to import these lines.

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