Angular2 HTTP con RXJS TypeError Observable:.. This.http.get (...) Mappa (...) cattura non è una funzione

Question

Ho seguente servizio, che stava lavorando bene fino ad oggi ho ottenuto questo errore

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

Quando eseguo il debug di questo codice, si blocca quando si tratta di rilevare il metodo.

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

Answer 1

Sembra che l'operatore di cattura non venga importato.

Si potrebbe provare a importare in questo modo:

import 'rxjs/add/operator/catch' 

o più in generale questo se si vuole avere più metodi per osservabili:

import 'rxjs/Rx'; 

Vai a questa domanda:

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

Answer 2

ho avuto lo stesso problema, ma nel mio caso il problema è stato, avevo importazione Richiesto moduli più volte in Module.ts

Answer 3

Il 'O' personaggio 'rxjs/O bservable' deve essere Maiuscolo.

Specificandolo in minuscolo 'o', si otterranno questo e altri errori spettrali. Questo deve essere importato in questo modo:

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

ci ho messo un'ora per trovarlo. Quando si usa l'importazione, generalmente i nomi sono in minuscolo. Questa è la prima volta che vedo questo. Spero che possa aiutare gli altri :)