Angular HTTP GET mit TypeScript-Fehler http.get(…).map ist keine Funktion in [null]

Ich habe ein Problem mit HTTP in Angular.

ich möchte einfach GET a JSON auflisten und in der Ansicht anzeigen.

Serviceklasse

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

Und in der HallListComponent Ich nenne die getHalls Methode aus dem Dienst:

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

Allerdings habe ich eine Ausnahme:

TypeError: this.http.get(…).map ist keine Funktion in [null]

Halle-Mitte.Komponente

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: "https://stackoverflow.com/",         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"
  ]
}

Ich denke, dass Sie dies importieren müssen:

import 'rxjs/add/operator/map'

Oder allgemeiner, wenn Sie mehr Methoden für Observables haben möchten.
WARNUNG: Dadurch werden alle über 50 Operatoren importiert und zu Ihrer Anwendung hinzugefügt, was sich auf Ihre Bundle-Größe und Ladezeiten auswirkt.

import 'rxjs/Rx';

Sehen dieses Problem für mehr Details.

Nur ein paar Hintergrundinformationen… Die neu geprägten Serverkommunikation dev guide (endlich) diskutiert/erwähnt/erklärt dies:

Die RxJS-Bibliothek ist ziemlich groß. Größe spielt eine Rolle, wenn wir eine Produktionsanwendung erstellen und sie auf Mobilgeräten bereitstellen. Wir sollten nur die Features einbauen, die wir wirklich brauchen.

Dementsprechend stellt Angular eine abgespeckte Version von bereit Observable in dem rxjs/Observable Modul, eine Version, der fast alle Operatoren fehlen, einschließlich derjenigen, die wir hier verwenden möchten, wie z map Methode.

Es liegt an uns, die benötigten Operatoren hinzuzufügen. Wir konnten jeden Operator einzeln hinzufügen, bis wir eine benutzerdefinierte Observable-Implementierung hatten, die genau auf unsere Anforderungen abgestimmt war.

Wie @Thierry bereits geantwortet hat, können wir einfach die benötigten Operatoren einfügen:

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

Oder, wenn wir faul sind, können wir den gesamten Satz von Operatoren verwenden. WARNUNG: Dadurch werden alle über 50 Operatoren zu Ihrem App-Bundle hinzugefügt, was sich auf die Ladezeiten auswirkt

import 'rxjs/Rx';

Aus rxjs 5.5 ab können Sie die verwenden verrohrbar Betreiber

import { map } from 'rxjs/operators';

Was ist falsch an der import 'rxjs/add/operator/map';

Wenn wir diesen Ansatz verwenden map Operator wird gepatcht observable.prototype und wird Teil dieses Objekts.

Wenn Sie sich später entscheiden, sie zu entfernen map -Operator aus dem Code, der den beobachtbaren Stream verarbeitet, aber die entsprechende import-Anweisung, den Code, der implementiert, nicht entfernen map bleibt ein Teil der Observable.prototype.

Wenn die Bundler versuchen, den unbenutzten Code (auch bekannt tree shaking), können sie sich entscheiden, den Code des zu behalten map Operator im Observable, obwohl er nicht in der Anwendung verwendet wird.

Lösung – Pipeable operators

Verrohrbar Operatoren sind reine Funktionen und patchen die nicht Beobachtbar. Sie können Operatoren mithilfe der ES6-Importsyntax importieren import { map } from "rxjs/operators" und packen sie dann in eine Funktion pipe() das nimmt eine variable Anzahl von Parametern, dh verkettbare Operatoren.

Etwas wie das:

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

Mit Angular 5 wurde der RxJS-Import verbessert.

Anstatt von

import 'rxjs/add/operator/map';

Wir können jetzt

import { map } from 'rxjs/operators';

Verwenden Observable.subscribe sollte direkt funktionieren.

@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()); // <<--
    }
}

Für Angular-Versionen 5 und höher sieht die aktualisierte Importzeile wie folgt aus:

import { map } from 'rxjs/operators';

ODER

import { map } from 'rxjs/operators';

Auch diese Versionen unterstützen Pipable-Operatoren vollständig, sodass Sie problemlos .pipe() und .subscribe() verwenden können.

Wenn Sie Angular Version 2 verwenden, sollte die folgende Zeile absolut funktionieren:

import 'rxjs/add/operator/map';

ODER

import 'rxjs/add/operators/map';

Wenn Sie immer noch auf ein Problem stoßen, müssen Sie mit gehen:

import 'rxjs/Rx';

Ich möchte nicht, dass Sie es direkt verwenden, weil es die Ladezeit erhöht, da es eine große Anzahl von Operatoren enthält (nützliche und unnütze), was nach den Industrienormen keine gute Praxis ist, also stellen Sie sicher Sie versuchen zuerst, die oben genannten Importzeilen zu verwenden, und wenn das nicht funktioniert, sollten Sie sich für rxjs/Rx entscheiden

Ich habe eine Lösung für dieses Problem

Installieren Sie dieses Paket:

npm install [email protected] [email protected] --save

importieren Sie dann diese Bibliothek

import 'rxjs/add/operator/map'

Starten Sie dann endlich Ihr ionisches Projekt neu

ionic serve -l