HTTP angular GET con error de tipografía http.get (…) .map no es una función en

Tengo un problema con HTTP en Angular.

Solo quiero GET una lista JSON y mostrarla en la vista.

Clase de servicio

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

Y en el HallListComponent getHalls método getHalls del servicio:

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

Sin embargo, tengo una excepción:

TypeError: this.http.get (…). Map no es una función en [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:` 

my app

`, 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: ` 

Examenopdracht Factory

Hall overview `, 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" ] } 

Creo que debes importar esto:

 import 'rxjs/add/operator/map' 

O más generalmente esto si quieres tener más métodos para observables. ADVERTENCIA: Esto importará los más de 50 operadores y los agregará a su aplicación, afectando así el tamaño de su paquete y los tiempos de carga.

 import 'rxjs/Rx'; 

Vea este problema para más detalles.

Solo algunos antecedentes … La nueva guía de desarrollo de Servidor Comunicación (finalmente) discute / menciona / explica esto:

La biblioteca RxJS es bastante grande. El tamaño importa cuando construimos una aplicación de producción y la implementamos en dispositivos móviles. Deberíamos incluir solo aquellas características que realmente necesitamos.

En consecuencia, Angular expone una versión rxjs/Observable de Observable en el módulo rxjs/Observable , una versión que carece de casi todos los operadores, incluidos los que nos gustaría usar aquí, como el método del map .

Depende de nosotros agregar los operadores que necesitamos. Podríamos agregar a cada operador, uno por uno, hasta que tengamos una implementación personalizada de Observable ajustada con precisión a nuestros requisitos.

Entonces, como @Thierry ya respondió, podemos incorporar los operadores que necesitamos:

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

O, si somos perezosos, podemos atraer al conjunto completo de operadores. ADVERTENCIA: esto agregará todos los operadores de más de 50 a su paquete de aplicaciones, y afectará los tiempos de carga

 import 'rxjs/Rx'; 

Con Angular 5, se mejora la importación de RxJS.

En lugar de

 import 'rxjs/add/operator/map'; 

Ahora podemos

 import { map } from 'rxjs/operators'; 

Usar la Observable.subscribe directamente debería funcionar.

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

Desde rxjs 5.5 en adelante, puede usar los operadores de pipeable

 import { map } from 'rxjs/operators'; 

¿Qué pasa con la import 'rxjs/add/operator/map';

Cuando usemos este map aproximación, el operador será parchado en el prototipo observable.prototype y se convierte en parte de este objeto.

Si más tarde decide eliminar el operador de map del código que maneja el flujo observable pero no elimina la statement de importación correspondiente, el código que implementa el map permanece como parte del Observable.prototype .

Cuando los bundlers intentan eliminar el código no utilizado ( también conocido como tree shaking ), pueden decidir mantener el código del operador del map en el Observable aunque no se esté utilizando en la aplicación.

SoluciónPipeable operators

Los operadores con pipeta son funciones puras y no parchan el Observable . Puede importar operadores utilizando la syntax de import { map } from "rxjs/operators" ES6 import import { map } from "rxjs/operators" y luego envolverlos en una función pipe() que toma una cantidad variable de parámetros, es decir, operadores encadenables.

Algo como esto:

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

Para las versiones angulares 5 y superiores, la línea de importación actualizada se ve así:

 import { map } from 'rxjs/operators'; 

O

 import { map } from 'rxjs/operators'; 

Además, estas versiones son totalmente compatibles con los operadores Pipable, por lo que puede usar fácilmente .pipe () y .subscribe ().

Si está utilizando la versión angular 2, entonces la siguiente línea debería funcionar absolutamente bien:

 import 'rxjs/add/operator/map'; 

O

 import 'rxjs/add/operators/map'; 

Si todavía encuentras un problema, entonces debes ir con:

 import 'rxjs/Rx'; 

No preferiría que lo usara directamente porque aumenta el tiempo de carga, ya que tiene una gran cantidad de operadores (útiles y no útiles) que no es una buena práctica según las normas de la industria, así que asegúrese primero intente usar las líneas de importación mencionadas anteriormente, y si eso no funciona, entonces debería ir por rxjs / Rx

Tengo una solución de este problema

Instala este paquete:

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

luego importa esta biblioteca

 import 'rxjs/add/operator/map' 

finalmente reinicie su proyecto iónico, entonces

 ionic serve -l 

Como el servicio Http en angular2 devuelve un tipo Observable , desde su directorio de instalación de Angular2 (‘node_modules’ en mi caso), necesitamos importar la función de mapa del Observable en su componente usando el servicio http , como:

 import 'rxjs/add/operator/map'; 

El mapa que usas aquí, no es .map() en javascript, es la función del mapa Rxjs que trabaja en Observables en Angular …

Entonces, en ese caso, debe importarlo si desea usar un mapa en los datos de resultados …

map(project: function(value: T, index: number): R, thisArg: any): Observable Aplica una función de proyecto dada a cada valor emitido por la fuente Observable, y emite los valores resultantes como un Observable.

Así que simplemente impórtala así:

 import 'rxjs/add/operator/map'; 

Es cierto que RxJs ha separado su operador de mapa en un módulo separado y ahora necesita explicitarlo como cualquier otro operador.

import rxjs/add/operator/map;

y estarás bien

La importación global es segura.

importar ‘rxjs / Rx’;

 import 'rxjs/add/operator/map'; 

resolverá tu problema

Lo probé en angular 5.2.0 y rxjs 5.5.2

Angular 6: solo la importación de ‘rxjs / Rx’ me funcionó

Solo agrega la línea en tu archivo,

importar ‘rxjs / Rx’;

Importará un montón de dependencias.Probado en angular 5

esto está sucediendo porque estás usando rxjs y en rxjs la función no es estática, lo que significa que no puedes llamarlos directamente, tienes que llamar a los métodos dentro de la tubería e importar esa función de la biblioteca rxjs

Pero si usa rxjs-compat, solo necesita importar los operadores rxjs-compat