Angular2 Http with RXJS Observable TypeError: this.http.get(...).map(...).catch is not a function

Question

I have following Service which was working fine until today i got this error

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

When I'm debugging this code it crashes when it comes to catch method.

import { Test } from "./home.component";
import { Injectable }     from "@angular/core";
import { Inject } from "@angular/core";
import { Http , Response  } from "@angular/http";
import { Observable }     from "rxjs/Observable";

@Injectable()
export class HomeService {
   public constructor(@Inject(Http)  private http: Http) {}

   public getData (): Observable<Test []> {
        return this.http.get("./src/app/home/home-data.json")
            .map(this.extractData).catch(this.handleError);
    }

    public extractData(res: Response) {
        let body = res.json();
        return body.data || { };
    }

    public handleError (error: any) {
        // In a real world app, we might use a remote logging infrastructure
        // We"d also dig deeper into the error to get a better message
        let errMsg = (error.message) ? error.message :
            error.status ? `${error.status} - ${error.statusText}` : "Server error";
        console.error(errMsg); // log to console instead
        return Observable.throw(errMsg);
    }
  }

Community · Accepted Answer · 2017-05-23 11:46:44Z

27

It seems that the catch operator isn't imported.

You could try to import it like this:

import 'rxjs/add/operator/catch'

Or more generally this if you want to have more methods for observables:

import 'rxjs/Rx';

See this question:

Angular 2 HTTP GET with TypeScript error http.get(...).map is not a function in [null]

edited May 23, 2017 at 11:46

CommunityBot

11 silver badge

answered Jul 17, 2016 at 21:03

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jorawar Singh Over a year ago

It worked! thanks. it's crazy that i have this import 'rxjs/Rx in my vendors file where i import my other dependencies also for angular2, but i believe i need to import this library to each file where i want to use this or in the main.ts.

Adam Mendoza Over a year ago

@Thierry, apparently importing the entire rxjs/Rx is not good practice. Do you think it's not that much of an improvement to import only the operators that you need?

Thilanka Ishara Gunathilake · Accepted Answer · 2017-09-18 08:36:35Z

0

I had the same issue but in my case the problem was, I had import Required modules several times in Module.ts

answered Sep 18, 2017 at 8:36

Thilanka Ishara Gunathilake

2864 silver badges18 bronze badges

Comments

Mehmet Recep Yildiz · Accepted Answer · 2018-02-22 15:03:18Z

0

The 'O' character in 'rxjs/Observable' must be Upper Case.

Specifying it in lower case 'o', will give you this and other spooky errors. This must be imported like this:

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

It took me an hour to find it. When using import, generally, the names are in lower case. This is the first time I'm seeing this. I hope it will help the others :)

answered Feb 22, 2018 at 15:03

Mehmet Recep Yildiz

2,2751 gold badge23 silver badges16 bronze badges

Collectives™ on Stack Overflow

Angular2 Http with RXJS Observable TypeError: this.http.get(...).map(...).catch is not a function

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related