HTTP GET angulaire avec erreur TypeScript http.get (…) .map n'est pas une fonction dans [null]

J'ai un problème avec HTTP dans Angular.

Je veux juste GETune JSONliste et la montrer 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 le HallListComponentj'appelle la getHallsméthode du 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: this.http.get (...). Map n'est pas une fonction dans [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"
  ]
}

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 pour les observables. AVERTISSEMENT: cela importera tous les 50+ opérateurs et les ajoutera à votre application, affectant ainsi la taille de votre bundle et les temps de chargement.

import 'rxjs/Rx';

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

Juste un peu d'histoire ... Le tout nouveau guide de développement Server Communication (enfin) discute / mentionne / explique ceci:

La bibliothèque RxJS est assez grande. La taille est importante lorsque nous créons une application de production et la déployons sur des appareils mobiles. Nous ne devons inclure que les fonctionnalités dont nous avons réellement besoin.

En conséquence, Angular expose une version allégée de Observabledans le rxjs/Observablemodule, une version qui manque de presque tous les opérateurs, y compris ceux que nous aimerions utiliser ici, comme la mapméthode.

A nous d'ajouter les opérateurs dont nous avons besoin. Nous pourrions ajouter chaque opérateur, un par un, jusqu'à ce que nous ayons une implémentation Observable personnalisée adaptée précisément à nos besoins.

Donc, comme @Thierry a déjà répondu, nous pouvons simplement attirer les opérateurs dont nous avons besoin:

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

Ou, si nous sommes paresseux, nous pouvons tirer l'ensemble complet des opérateurs. AVERTISSEMENT: cela ajoutera tous les 50+ opérateurs à votre ensemble d'applications et affectera les temps de chargement

import 'rxjs/Rx';

À partir de rxjs 5.5 , vous pouvez utiliser les opérateurs canalisables

import { map } from 'rxjs/operators';

Quel est le problème avec le import 'rxjs/add/operator/map';

Lorsque nous utilisons cette approche, l' mapopérateur est corrigé observable.prototype et devient une partie de cet objet.

Si plus tard, vous décidez de supprimer l' mapopérateur du code qui gère le flux observable mais ne supprimez pas l'instruction d'importation correspondante, le code qui implémente mapreste une partie de la Observable.prototype.

Lorsque les bundlers tentent d'éliminer le code inutilisé ( aka tree shaking ), ils peuvent décider de conserver le code du map opérateur dans l'Observable même s'il n'est pas utilisé dans l'application.

Solution -Pipeable operators

Les opérateurs canalisables sont de simples fonctions et ne corrigent pas l' Observable . Vous pouvez importer des opérateurs à l'aide de la syntaxe d'importation ES6 import { map } from "rxjs/operators", puis les encapsuler dans une fonction pipe()qui prend un nombre variable de paramètres, c'est-à-dire des opérateurs chaînables.

Quelque chose comme ça:

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

Avec Angular 5, l'importation RxJS est améliorée.

Au lieu de

import 'rxjs/add/operator/map';

Nous pouvons maintenant

import { map } from 'rxjs/operators';

L'utilisation Observable.subscribedirecte 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()); // <<--
    }
}

Pour les versions angulaires 5 et supérieures, la ligne d'importation mise à jour ressemble à:

import { map } from 'rxjs/operators';

OU

import { map } from 'rxjs/operators';

De plus, ces versions prennent totalement en charge les opérateurs pipables afin que vous puissiez facilement utiliser .pipe () et .subscribe ().

Si vous utilisez la version angulaire 2, la ligne suivante devrait fonctionner parfaitement:

import 'rxjs/add/operator/map';

OU

import 'rxjs/add/operators/map';

Si vous rencontrez toujours un problème, vous devez choisir:

import 'rxjs/Rx';

Je ne préférerais pas que vous l'utilisiez directement car il augmente le temps de chargement, car il contient un grand nombre d'opérateurs (utiles et inutiles), ce qui n'est pas une bonne pratique selon les normes de l'industrie, alors assurez-vous vous essayez d'abord d'utiliser les lignes d'importation mentionnées ci-dessus, et si cela ne fonctionne pas, vous devriez opter pour rxjs / Rx

J'ai une solution à ce problème

Installez ce package:

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

puis importez cette bibliothèque

import 'rxjs/add/operator/map'

redémarrez enfin votre projet ionique puis

ionic serve -l

Version angulaire 6 "0.6.8" rxjs version 6 "^ 6.0.0"

cette solution est pour:

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

comme nous le savons tous, angular est développé tous les jours, donc il y a beaucoup de changements chaque jour et cette solution est pour angular 6 et rxjs 6 d'
abord pour travailler avec http, vous devez l'importer: après tout, vous devez déclarer le HttpModule dans l'application. module.ts

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

et vous devez ajouter HttpModule à Ngmodule -> importations

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

deuxième pour travailler avec la carte, vous devez d'abord importer le tuyau:

import { pipe } from 'rxjs';

Troisièmement, vous devez importer la fonction de carte à partir de:

import { map } from 'rxjs/operators';

vous devez utiliser map inside pipe comme cet exemple:

 constructor(public http:Http){  }

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

ça marche parfaitement bonne chance!

La carte que vous utilisez ici, n'est pas .map()en javascript, c'est la fonction de carte Rxjs qui fonctionne sur ObservablesAngular ...

Donc, dans ce cas, vous devez l'importer si vous souhaitez utiliser la carte sur les données de résultat ...

map(project: function(value: T, index: number): R, thisArg: any): Observable<R> Applique une fonction de projet donnée à chaque valeur émise par l'observable source et émet les valeurs résultantes en tant qu'observable.

Il suffit donc de l'importer comme ceci:

import 'rxjs/add/operator/map';

Étant donné que le service Http dans angular2 renvoie un type Observable , à partir de votre répertoire d'installation Angular2 ('node_modules' dans mon cas), nous devons importer la fonction de carte de l'Observable dans votre composant en utilisant le service http , comme:

import 'rxjs/add/operator/map';

Angular 6 - seule l'importation 'rxjs / Rx' a fait l'affaire pour moi

Ajoutez simplement la ligne dans votre fichier,

importer 'rxjs / Rx';

Il importera un tas de dépendances.Testé en angulaire 5

Certes, RxJs a séparé son opérateur de carte dans un module séparé et vous devez maintenant l'impliquer explicitement comme n'importe quel autre opérateur.

import rxjs/add/operator/map;

et tout ira bien.

L'importation mondiale est sûre.

importer 'rxjs / Rx';

import 'rxjs/add/operator/map';

va résoudre votre problème

Je l'ai testé dans angular 5.2.0 et rxjs 5.5.2

cela se produit parce que vous utilisez les rxjs et que la fonction dans rxjs n'est pas statique, ce qui signifie que vous ne pouvez pas les appeler directement, vous devez appeler les méthodes à l'intérieur du canal et importer cette fonction depuis la bibliothèque rxjs

Mais si vous utilisez rxjs-compat, il vous suffit d'importer les opérateurs rxjs-compat

J'ai essayé les commandes ci-dessous et cela se corrige:

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


import 'rxjs/Rx';

importer {map} depuis 'rxjs / operators';

cela fonctionne pour moi en angulaire 8

De plus, ce que @ mlc-mlapis a commenté, vous mélangez les opérateurs locables et la méthode de correction de prototype. Utilisez l'un ou l'autre .

Pour votre cas, il devrait être

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