Map is not a function (Rxjs), although import

Question

There were a lot of questions about the fact that “map is not a function”, but almost all simply did not import the rxjs library.

In my case, I am importing, but the error still exists.

I work with Ionic 2, and here is what my package.json dependencies look like:

"dependencies": { "@angular/common": "2.0.0", "@angular/compiler": "2.0.0", "@angular/compiler-cli": "0.6.2", "@angular/core": "2.0.0", "@angular/forms": "2.0.0", "@angular/http": "2.0.0", "@angular/platform-browser": "2.0.0", "@angular/platform-browser-dynamic": "2.0.0", "@angular/platform-server": "2.0.0", "@ionic/storage": "1.0.3", "ionic-angular": "2.0.0-rc.1", "ionic-native": "2.2.3", "ionicons": "3.0.0", "rxjs": "5.0.0-beta.12" } 

So this is how I create my service:

 import { Injectable } from '@angular/core'; import { Http, Headers, RequestOptions, Response } from '@angular/http'; import { Observable } from 'rxjs'; import 'rxjs/add/operator/map'; @Injectable() export class LoginService { constructor(private http: Http) { } private dataUrl = '/node'; getData() : any { this.http.get(this.dataUrl) .map(response => response.json()) .subscribe(result => console.log(result)); } } 

I also tried reinstalling the rxjs module, but still did not succeed. Maybe this is incompatible with ionic 2 or the current version of angular?

What do the guys think?

Greetings

Andrey

Answer 1

This is 2018. I had the same problem. This is what worked for me:

 import { Observable } from 'rxjs'; import { map } from 'rxjs/operators'; this.http.get(url) .pipe(map(r => r.json())) .subscribe(resp => { resp = resp.json(); console.log(resp); }); 

Answer 2

I had the same problem.

I am using jspm with system.js. For me, when I upgraded my system using jspm update angular2 -http required rxjs@5.0.0-beta.12 , but angular2-dynamic-component@0.0.50 requires rxjs@5.0.0-rc.2 , which then maps to "rxjs". I guess it was the newest version? I discovered all this by checking out the config.js file created by jspm.

So apparently when I used the expression ...

 import 'rxjs/add/operator/map'; 

... he was adding a map to rxjs version 5.0.0-beta.12 , which is not the version used by http. I had to change the line to ...

 import 'npm: rxjs@5.0.0-beta.12 /add/operator/map'; 

... and then it worked.

Answer 3

create rxjs-operator.ts file

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

and name it if necessary.

 import './rxjs-operators'; 

Answer 4

try

  import {Observable} from 'rxjs/Observable'; getData() : Observable<any> { this.http.get(this.dataUrl) .map(response => response.json()) .subscribe(result => console.log(result)); } 

Answer 5

to try

import {Injectable} of '@ angular / core'; import {Http, Response, Headers, URLSearchParams, RequestOptions} of '@ angular / http'; import {Observable} of 'rxjs / Observable'; import 'rxjs / Rx';

Answer 6

Please import the map as follows:

 import { map } from 'rxjs/operators'; 

instead of 'rxjs / add / operator / map'

Answer 7

import import 'rxjs / Rx'; has some problems with version 5.5.2, since for each import I can switch from import {Observable} from 'rxjs / Rx' to import {Observable} from 'rxjs / Observable';