277

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.

29 Answers 29

484

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.

12
  • Invalid module name in augmentation, module '../../Observable' cannot be found. Property 'map' does not exist on type 'Observable<Response>'. May 13, 2016 at 12:33
  • 1
    How do you import the Observable class? Like this: import {Observable} from 'rxjs/Observable'; or import {Observable} from 'rxjs/Rx';? May 13, 2016 at 12:36
  • i am not import this class so far May 13, 2016 at 12:41
  • 1
    I am using Angular 2 RC1 and rxjs 5.0.0-beta2. I have imported Observable as import {Observable} from 'rxjs/observable'; and imported map operator like import 'rxjs/add/operator/map'; It was working when I was using Beta 7. I just upgraded to RC1 and it broke. May 31, 2016 at 11:25
  • 4
    First write this command in vs code terminal of your project and restart the project. npm install rxjs-compat , than import the map operator. Jul 26, 2018 at 11:05
216

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

6
  • 2
    I'm not sure why the migration tool rxjs-5-to-6-migrate doesn't pick this up? It's interesting that it doesn't address the do/tap re-mapping which in my environment is still unresolved even though the import tool recognizes it. 90% of my 'unanticipated wasted time' in Angular development is spent with RxJS document and code boundary issues, this is really frustrating.
    – Joe
    May 8, 2018 at 17:10
  • 1
    Thank you! You are a lifesaver!! Whoever is interested, the full reference to this change is available here: github.com/ReactiveX/rxjs/blob/master/…
    – malvadao
    May 8, 2018 at 17:39
  • 32
    This worked for me, I also needed to add import { map } from 'rxjs/operators';
    – paul
    May 14, 2018 at 23:57
  • Funny, this is exactly how we fixed it on angular 6 upgrade - which brought the latest rxjs too.
    – Max
    Jun 2, 2018 at 18:07
  • 4
    @paul Thanks. Regarding .catch, we can use catchError like .pipe(catchError(this.handleError)) ? Jun 6, 2018 at 11:10
72

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';
1
  • 2
    if it does not work close all the files and restart the vs studio.
    – Ajay Takur
    Aug 12, 2018 at 16:01
41

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()));
4
  • it helped me @Katana24 as I saw the correct syntax with pipe. Jun 12, 2019 at 4:38
  • that solution works good in angular 10 where not need to install rxjs-compat that will give warnings like 'Fix CommonJS or AMD dependencies can cause optimization bailouts'
    – mrapi
    Jul 11, 2020 at 13:25
  • How do you access the JSON object through this? When i try to print the JSON string with console.log(), I only get a Observable<Any> object?
    – Eric
    Nov 2, 2020 at 9:17
  • This is the way to go with Angular 12, apparently. Thanks! Sep 3, 2021 at 9:32
26

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';
1
  • 1
    This practice is considered not bundle-size-friendly since that statement imports all operators of Observable (including the ones that you don't use) into the bundle. Instead, you should import each operator individually. I recommend using "lettable operators", which was introduced in RxJS v5.5 to support better tree-shaking. Oct 27, 2017 at 14:34
20

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

1
  • 1
    Take note of this answer as anyone doing RxJS v6 will need to use the .pipe() or none of the operators will work directly off the Observable. You'll see an error like, Property 'share' does not exist on type 'Observable<{}>'
    – atconway
    Jul 26, 2018 at 17:45
12

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

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.

8

just install rxjs-compat by typing in terminal:

npm install --save rxjs-compat

then import :

import 'rxjs/Rx';
6
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.

5

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';
1
  • I feel its not right to include rxjs-operators in every services. It should be included only at app.module.ts but unfortunately ng test throws error if operators are not imported in specific places
    – Mohan Ram
    Sep 5, 2017 at 4:51
4

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

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

0
3

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: Import of rxjs/Rx is blacklisted in Angular 5.2

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.

1
  • @AndrewBenjamin I highly suggest that you do that. That will save you a lot of trouble down the lane.
    – Devner
    Mar 12, 2018 at 9:15
3

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

Simply install rxjs-compat to solve the problem

npm i rxjs-compat --save-dev

And import it like below

import 'rxjs/Rx';
3

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.

3

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

It is recommended here

1
  • Please don't forget to import 'rxjs/add/operator/map'
    – trustidkid
    Nov 18, 2019 at 15:37
2

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.

2

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

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.

1

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.

1

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

1

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

0

Angular 9:

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

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']))
0

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

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';
1
  • 1
    This late answer is redundant. Jul 8, 2019 at 21:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.