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

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.

  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.

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;
  })
})

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.

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.

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

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';

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.

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

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';

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';

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()));

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

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.

just install rxjs-compat by typing in terminal:

npm install --save rxjs-compat

then import :

import 'rxjs/Rx';

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';

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.

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)
 })

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));
    }
}

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

It is recommended here

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

Angular 9:

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

Simply install rxjs-compat to solve the problem

npm i rxjs-compat --save-dev

And import it like below

import 'rxjs/Rx';

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.

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;
  }));

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.