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

angular typescript1.8

Solution 1:^[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.

Solution 2:^[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

Solution 3:^[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';

Solution 4:^[4]

For the Angular 7v

Change

import 'rxjs/add/operator/map';

import { map } from "rxjs/operators";

And

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

Solution 5:^[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';

Solution 6:^[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

Solution 7:^[7]

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.

Solution 8:^[8]

just install rxjs-compat by typing in terminal:

npm install --save rxjs-compat

then import :

import 'rxjs/Rx';

Solution 9:^[9]

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

Solution 10:^[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.

Solution 11:^[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';

Solution 12:^[12]

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

Solution 13:^[13]

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.

Solution 14:^[14]

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

Solution 15:^[15]

Simply install rxjs-compat to solve the problem

npm i rxjs-compat --save-dev

And import it like below

import 'rxjs/Rx';

Solution 16:^[16]

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.

Solution 17:^[17]

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

It is recommended here

Solution 18:^[18]

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

Solution 19:^[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.

Solution 20:^[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;
  })
})

Solution 21:^[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.

Solution 22:^[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.

Solution 23:^[23]

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

Solution 24:^[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)
 })

Solution 25:^[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.

Solution 26:^[26]

Angular 9:

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

Solution 27:^[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']))

Solution 28:^[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>;

Solution 29:^[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';

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Edric
Solution 2	Trilarion
Solution 3	d-cubed
Solution 4	Rosdi Kasim
Solution 5	S.Galarneau
Solution 6	Hari Prasad Sharma
Solution 7	Hearen
Solution 8	Amir.S
Solution 9
Solution 10
Solution 11
Solution 12	boxed__l
Solution 13	Devner
Solution 14	Steffi Keran Rani J
Solution 15	Ankit Bhatia
Solution 16	Alireza
Solution 17	trustidkid
Solution 18	Arash
Solution 19	Shailendra Madda
Solution 20	Kos
Solution 21
Solution 22	JavaJunior
Solution 23	Ajay Takur
Solution 24	D C
Solution 25	Nadeem Qasmi
Solution 26	Duc Nguyen
Solution 27	Sunny
Solution 28	smit agravat
Solution 29	Shailaja valiveti

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

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]

Solution 10:[10]

Solution 11:[11]

Solution 12:[12]

Solution 13:[13]

Solution 14:[14]

Solution 15:[15]

Solution 16:[16]

Solution 17:[17]

Solution 18:[18]

Solution 19:[19]

Solution 20:[20]

Solution 21:[21]

Solution 22:[22]

Solution 23:[23]

Solution 24:[24]

Solution 25:[25]

Solution 26:[26]

Solution 27:[27]

Solution 28:[28]

Solution 29:[29]