Angular 2 HTTP GET avec l'erreur TypeScript http.get (...). Map n'est pas une fonction dans [null]

Question

J'ai un problème avec l'adresse HTTP en Angular 2.

Je veux juste GET un JSON liste et l'afficher dans la vue.

Classe de Service

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

Et dans l' HallListComponent - je appeler l' getHalls méthode de service:

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

Cependant, j'ai eu une EXCEPTION:

TypeError: ce.http.obtenir(...).la carte n'est pas une fonction dans [null]

hall-centre.composant

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.composant

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"
  ]
}

Désolé pour le long post...

Answer 1

Je pense que vous devez importer ceci:

 import 'rxjs/add/operator/map'
 

Ou plus généralement ceci si vous voulez avoir plus de méthodes d'observables:

 import 'rxjs/Rx';
 

Voir ce numéro pour plus de détails.

Answer 2

Juste un peu de fond... Le tout nouveau Serveur de Communication dev guide (enfin) discute/mentions/explique ceci:

Le RxJS bibliothèque est très grande. Une question de taille, lorsque nous construisons une application de production et le déployer sur les appareils mobiles. Nous devons inclure uniquement les fonctionnalités que nous avons réellement besoin.

En conséquence, Angulaire expose une version allégée de l' Observable dans la rxjs/Observable module, une version qui manque à presque tous les opérateurs, y compris ceux que nous aimerions utiliser ici comme l' map méthode.

C'est à nous d'ajouter les opérateurs que nous avons besoin. Nous pourrions ajouter à chaque opérateur, un par un, jusqu'à ce que nous avions coutume Observables de la mise en œuvre précisément à l'écoute de nos besoins.

Afin @Thierry déjà répondu, il nous suffit de tirer dans les opérateurs que nous avons besoin de:

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

Ou, si nous sommes paresseux que nous pouvons tirer de l'ensemble des opérateurs:

import 'rxjs/Rx';

Answer 3

Utiliser Observable.subscribe directement devrait fonctionner.

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