Ionic : this.http.get(...).map is not a function

Question

In my following extract of code of Ionic 3, even after adding all the imports for rxjs operator of map, still the issue persists.

TypeError: this.http.get(...).map is not a function

my imports already added and code are as follows:

import { map } from 'rxjs/operators';
import "rxjs/add/operator/map";
import "rxjs/Rx";
import { Injectable } from "@angular/core";
import { HTTP } from "@ionic-native/http";
import { BehaviorSubject } from "rxjs/BehaviorSubject";
import { Observable } from "rxjs/Observable";

public method(): Observable<any> {
return this.http
  .get(this.getMethodUrl)
  .map(this.extractResponse)
  .catch(this.handleError);
}

RxJs version : 5.2.11

Ionic:

ionic (Ionic CLI) : 4.0.0

(C:\Users\Genesis-PC\AppData\Roaming\npm\node_modules\ionic)

IonicFramework : ionic-angular 3.9.2 @ionic/app-scripts : 3.1.11

Cordova:

cordova (Cordova CLI) : 8.0.0

Cordova Platforms : android 7.1.1

System:

NodeJS : v8.11.4 (C:\Program Files\nodejs\node.exe)
npm :6.4.0 OS : Windows 10

Even if this issue has been discussed and resolved on StackOverflow previously, none of them is working for me.

Any help will be profoundly appreciated!

Answer 1

According to the official Ionic documentation (https://ionicframework.com/docs/native/http/), the return type of HTTP.get is Promise<HTTPResponse>, not Observable. Therefore, you can't use Observable operators on that type.

In order to create an Observable from a Promise (RxJS 5), simply use:

import { Observable } from 'rxjs/Observable';
let httpResult$ =  Observable.fromPromise(this.http.get(this.getMethodUrl));

Here is your code with the use of Observable:

import { map } from 'rxjs/operators';
import "rxjs/add/operator/map";
import "rxjs/Rx";
import { Injectable } from "@angular/core";
import { HTTP } from "@ionic-native/http";
import { BehaviorSubject } from "rxjs/BehaviorSubject";
import { Observable } from "rxjs/Observable";

public method(): Observable<any> {
return Observable.fromPromise(this.http
  .get(this.getMethodUrl))
  .map(this.extractResponse)
  .catch(this.handleError);
}

For RxJS 6+, use the new from operator:

import { from } from 'rxjs';
let httpResult$ =  from(this.http.get(this.getMethodUrl));

Note: You're IDE might not be configured correctly, this type error should appear immediately (marked red).

Answer 2

if you are using RXJS 6 use pipe

import { Observable } from "rxjs";
import { map,catchError } from "rxjs/operators";

public method(): Observable<any> {
return this.http
  .get(this.getMethodUrl)
  .pipe(
     map(this.extractResponse),
     catchError(this.handleError)
  )
}

Answer 3

Ionic http.get is returning promises. Unlike angular httpClient.get (return as observable), so you have 3 options to solve this.

1. Change your code to use promise

   this.http .get(this.getMethodUrl) .then(this.extractResponse) // change to .then ...

2. Replace your ionic http service to angular httpClient.get. Not sure why you are not using httpClient.get at the first place.

3. Convert the promise to observable by using fromPromise like @ggradnig mentioned. However, suggest you to go with option 2.