HTTP GET angolare con errore TypeScript http.get (…) .map non è una funzione in [null]

Ho un problema con HTTP in angolare.

Voglio solo GETun JSONelenco e mostrarlo nella vista.

Classe di servizio

import {Injectable} from "angular2/core";
import {Hall} from "./hall";
import {Http} from "angular2/http";
@Injectable()
export class HallService {
    public http:Http;
    public static PATH:string = 'app/backend/'    

    constructor(http:Http) {
        this.http=http;
    }

    getHalls() {
           return this.http.get(HallService.PATH + 'hall.json').map((res:Response) => res.json());
    }
}

E nel HallListComponentchiamo il getHallsmetodo dal servizio:

export class HallListComponent implements OnInit {
    public halls:Hall[];
    public _selectedId:number;

    constructor(private _router:Router,
                private _routeParams:RouteParams,
                private _service:HallService) {
        this._selectedId = +_routeParams.get('id');
    }

    ngOnInit() {
        this._service.getHalls().subscribe((halls:Hall[])=>{ 
            this.halls=halls;
        });
    }
}

Tuttavia, ho ottenuto un'eccezione:

TypeError: this.http.get (...). Map non è una funzione in [null]

hall-center.component

import {Component} from "angular2/core";
import {RouterOutlet} from "angular2/router";
import {HallService} from "./hall.service";
import {RouteConfig} from "angular2/router";
import {HallListComponent} from "./hall-list.component";
import {HallDetailComponent} from "./hall-detail.component";
@Component({
    template:`
        <h2>my app</h2>
        <router-outlet></router-outlet>
    `,
    directives: [RouterOutlet],
    providers: [HallService]
})

@RouteConfig([
    {path: '/',         name: 'HallCenter', component:HallListComponent, useAsDefault:true},
    {path: '/hall-list', name: 'HallList', component:HallListComponent}
])

export class HallCenterComponent{}

app.component

import {Component} from 'angular2/core';
import {ROUTER_DIRECTIVES} from "angular2/router";
import {RouteConfig} from "angular2/router";
import {HallCenterComponent} from "./hall/hall-center.component";
@Component({
    selector: 'my-app',
    template: `
        <h1>Examenopdracht Factory</h1>
        <a [routerLink]="['HallCenter']">Hall overview</a>
        <router-outlet></router-outlet>
    `,
    directives: [ROUTER_DIRECTIVES]
})

@RouteConfig([
    {path: '/hall-center/...', name:'HallCenter',component:HallCenterComponent,useAsDefault:true}
])
export class AppComponent { }

tsconfig.json

{
  "compilerOptions": {
    "target": "ES5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules"
  ]
}

Penso che sia necessario importare questo:

import 'rxjs/add/operator/map'

O più in generale questo se vuoi avere più metodi per osservabili. ATTENZIONE: Questo importerà tutti gli oltre 50 operatori e li aggiungerà all'applicazione, influendo così sulla dimensione del pacchetto e sui tempi di caricamento.

import 'rxjs/Rx';

Vedi questo numero per maggiori dettagli.

Solo alcuni retroscena ... La guida per sviluppatori di comunicazione server recentemente coniata (finalmente) discute / menziona / spiega questo:

La libreria RxJS è piuttosto grande. Le dimensioni contano quando creiamo un'applicazione di produzione e la distribuiamo su dispositivi mobili. Dovremmo includere solo quelle funzionalità di cui abbiamo effettivamente bisogno.

Di conseguenza, Angular espone una versione ridotta Observablenel rxjs/Observablemodulo, una versione che manca di quasi tutti gli operatori, compresi quelli che vorremmo usare qui come il mapmetodo.

Sta a noi aggiungere gli operatori di cui abbiamo bisogno. Potremmo aggiungere ciascun operatore, uno per uno, fino a quando un'implementazione osservabile personalizzata sarà sintonizzata esattamente sulle nostre esigenze.

Quindi, come ha già risposto @Thierry, possiamo semplicemente inserire gli operatori di cui abbiamo bisogno:

import 'rxjs/add/operator/map';
import 'rxjs/operator/delay';
import 'rxjs/operator/mergeMap';
import 'rxjs/operator/switchMap';

Oppure, se siamo pigri, possiamo inserire l'intera serie di operatori. ATTENZIONE: questo aggiungerà tutti gli oltre 50 operatori al pacchetto dell'app e influirà sui tempi di caricamento

import 'rxjs/Rx';

Da rxjs 5.5 in poi, è possibile utilizzare gli operatori pipable

import { map } from 'rxjs/operators';

Cosa c'è che non va nel import 'rxjs/add/operator/map';

Quando utilizziamo questo approccio, l' mapoperatore verrà corretto observable.prototype e diventerà parte di questo oggetto.

Se in seguito, decidi di rimuovere l' mapoperatore dal codice che gestisce il flusso osservabile ma non riesci a rimuovere la corrispondente dichiarazione di importazione, il codice che implementa maprimane parte del Observable.prototype.

Quando i bundler cercano di eliminare il codice inutilizzato ( aka tree shaking ), possono decidere di mantenere il codice mapdell'operatore nell'Osservabile anche se non viene utilizzato nell'applicazione.

Soluzione -Pipeable operators

Gli operatori pipable sono funzioni pure e non patch l' Osservabile . È possibile importare operatori utilizzando la sintassi di importazione ES6 import { map } from "rxjs/operators"e quindi inserirli in una funzione pipe()che accetta un numero variabile di parametri, ovvero operatori concatenabili.

Qualcosa come questo:

getHalls() {
    return this.http.get(HallService.PATH + 'hall.json')
    .pipe(
        map((res: Response) => res.json())
    );
}

Con Angular 5 l'importazione di RxJS è migliorata.

Invece di

import 'rxjs/add/operator/map';

Ora possiamo

import { map } from 'rxjs/operators';

L'uso Observable.subscribediretto dovrebbe funzionare.

@Injectable()
export class HallService {
    public http:Http;
    public static PATH:string = 'app/backend/'    

    constructor(http:Http) {
        this.http=http;
    }

    getHalls() {
    // ########### No map
           return this.http.get(HallService.PATH + 'hall.json');
    }
}


export class HallListComponent implements OnInit {
    public halls:Hall[];
    / *** /
    ngOnInit() {
        this._service.getHalls()
           .subscribe(halls => this.halls = halls.json()); // <<--
    }
}

Per le versioni angolari 5 e successive, la riga di importazione aggiornata è simile a:

import { map } from 'rxjs/operators';

O

import { map } from 'rxjs/operators';

Inoltre, queste versioni supportano totalmente gli operatori Pipable in modo da poter usare facilmente .pipe () e .subscribe ().

Se si utilizza Angular versione 2, la seguente riga dovrebbe funzionare perfettamente:

import 'rxjs/add/operator/map';

O

import 'rxjs/add/operators/map';

Se il problema persiste, devi procedere con:

import 'rxjs/Rx';

Non preferirò che tu lo usi direttamente perché aumenta il tempo di caricamento, poiché ha un gran numero di operatori (utili e non utili) che non è una buona pratica secondo le norme del settore, quindi assicurati si tenta di utilizzare prima le righe di importazione sopra menzionate e, se ciò non funziona, si dovrebbe scegliere rxjs / Rx

Ho una soluzione a questo problema

Installa questo pacchetto:

npm install rxjs@6 rxjs-compat@6 --save

quindi importare questa libreria

import 'rxjs/add/operator/map'

finalmente riavvia il tuo progetto ionico allora

ionic serve -l

Versione angolare 6 "0.6.8" versione rxjs 6 "^ 6.0.0"

questa soluzione è per:

  "@angular-devkit/core": "0.6.8",
  "rxjs": "^6.0.0"

come tutti sappiamo, angular viene sviluppato ogni giorno, quindi ogni giorno ci sono molti cambiamenti e questa soluzione è per angular 6 e rxjs 6 per la
prima volta su cui lavorare con http da cui è necessario importarlo: dopotutto devi dichiarare l'HttpModule in app. module.ts

import { Http } from '@angular/http';

e devi aggiungere HttpModule a Ngmodule -> importazioni

  imports: [
    HttpModule,
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(appRoutes)
  ],

secondo per lavorare con la mappa dovresti prima importare pipe:

import { pipe } from 'rxjs';

in terzo luogo è necessario importare la funzione mappa da:

import { map } from 'rxjs/operators';

devi usare map inside pipe come questo esempio:

 constructor(public http:Http){  }

    getusersGET(){
        return this.http.get('http://jsonplaceholder.typicode.com/users').pipe(
         map(res => res.json()  )  );
    }

che funziona perfettamente buona fortuna!

La mappa che stai usando qui, non è .map()in javascript, è la funzione della mappa Rxjs su cui sta lavorandoObservables in Angolare ...

Quindi in tal caso è necessario importarlo se si desidera utilizzare la mappa sui dati dei risultati ...

map(project: function(value: T, index: number): R, thisArg: any): Observable<R> Applica una determinata funzione di progetto a ciascun valore emesso dall'osservabile di origine ed emette i valori risultanti come osservabile.

Quindi semplicemente importalo in questo modo:

import 'rxjs/add/operator/map';

Poiché il servizio Http in angular2 restituisce un tipo Osservabile , dalla directory di installazione di Angular2 ('node_modules' nel mio caso), abbiamo bisogno di importare la funzione cartografica dell'Osservabile nel tuo componente usando il servizio http , come:

import 'rxjs/add/operator/map';

Angular 6 - importare solo 'rxjs / Rx' ha fatto il trucco per me

Aggiungi la linea nel tuo file,

import 'rxjs / Rx';

Importerà un mucchio di dipendenze. Testato nell'angolo 5

È vero, RxJs ha separato il suo operatore di mappa in un modulo separato e ora è necessario importarlo esplicitamente come qualsiasi altro operatore.

import rxjs/add/operator/map;

e starai bene.

L'importazione globale è sicura.

import 'rxjs / Rx';

import 'rxjs/add/operator/map';

risolverà il tuo problema

L'ho provato in angolare 5.2.0 e rxjs 5.5.2

questo accade perché stai usando rxjs e nella funzione rxjs non sono statici, il che significa che non puoi chiamarli direttamente devi chiamare i metodi all'interno della pipe e importare quella funzione dalla libreria rxjs

Ma se stai usando rxjs-compat, devi solo importare gli operatori rxjs-compat

Ho provato sotto i comandi e viene risolto:

npm install rxjs@6 rxjs-compat@6 --save


import 'rxjs/Rx';

importare {map} da 'rxjs / operatori';

questo funziona per me in 8 angolare

Oltre a ciò che ha commentato @ mlc-mlapis, si stanno mescolando operatori consentiti e il metodo di patching del prototipo. Usa l'uno o l'altro .

Per il tuo caso dovrebbe essere

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/map';

@Injectable()
export class SwPeopleService {
    people$ = this.http.get('https://swapi.co/api/people/')
      .map((res:any) => res.results);

    constructor(private http: HttpClient) {} 
}

https://stackblitz.com/edit/angular-http-observables-9nchvz?file=app%2Fsw-people.service.ts