map is not a function (Rxjs) though import

Question

there were a lot of questions about "map is not a function", but almost everyone just did not imported the rxjs library.

In my case, I do the import, but the error is still there.

I work with Ionic 2 and this is how 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 that 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 to reinstall the rxjs module, but still no success. Maybe it is incompatible with ionic 2 or the current angular version?

What do u think guys?

Cheers,

Andrej

Answer 1

This is 2018. I was having this same issue. 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 [email protected], but [email protected] required [email protected] which is then what "rxjs" mapped to. I suppose because it was the newest version? I discovered all this by inspecting the config.js file that was created by jspm.

So apparently when I used the statement ...

import 'rxjs/add/operator/map';

... it was adding map to to rxjs version 5.0.0-beta.12 which is not the version that http was using. I had to change the line to ...

import 'npm:[email protected]/add/operator/map'; 

... and then it worked.

Answer 3

create file rxjs-operators.ts

// 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 call it when if needed.

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