typescript - tipo - property map does not exist on type observable response angular 6
Angular 2 beta.17: la propiedad ''map'' no existe en el tipo ''Observable<Response>'' (16)
LA RESPUESTA FINAL PARA LOS QUE UTILIZAN ANGULAR 6:
Agregue el siguiente comando en su archivo * .service.ts "
import { map } from "rxjs/operators";
**********************************************Example**Below**************************************
getPosts(){
this.http.get(''http://jsonplaceholder.typicode.com/posts'')
.pipe(map(res => res.json()));
}
}
Estoy usando Windows 10;
angular6 con mecanografiado V 2.3.4.0
Acabo de actualizar de Angular 2 beta16 a beta17 , que a su vez requiere rxjs 5.0.0-beta.6. (Registro de cambios aquí: https://github.com/angular/angular/blob/master/CHANGELOG.md#200-beta17-2016-04-28 ) En beta16 todo funcionaba bien con respecto a la funcionalidad Observable / mapa. Los siguientes errores aparecieron después de que actualicé y ocurren cuando el mecanografiado intenta transpilar:
- La propiedad ''mapa'' no existe en el tipo ''Observable'' (en cualquier lugar donde haya usado un mapa con un observable)
- c: /path/node_modules/rxjs/add/operator/map.d.ts (2,16): error TS2435: Los módulos ambientales no pueden anidarse en otros módulos o espacios de nombres.
- c: /path/node_modules/rxjs/add/operator/map.d.ts (2,16): error TS2436: La declaración del módulo ambiental no puede especificar un nombre de módulo relativo.
He visto esta pregunta / respuesta pero no resuelve el problema: errores observables con Angular2 beta.12 y RxJs 5 beta.3
Mi appBoot.ts tiene este aspecto (ya estoy haciendo referencia a rxjs / map):
///<reference path="./../node_modules/angular2/typings/browser.d.ts"/>
import {bootstrap} from "angular2/platform/browser";
import {ROUTER_PROVIDERS} from ''angular2/router'';
import {HTTP_PROVIDERS} from ''angular2/http'';
[stuff]
import ''rxjs/add/operator/map'';
import ''rxjs/add/operator/toPromise'';
import {enableProdMode} from ''angular2/core'';
import { Title } from ''angular2/platform/browser'';
//enableProdMode();
bootstrap(AppDesktopComponent, [
ROUTER_PROVIDERS,
HTTP_PROVIDERS,
Title
]);
¿Alguien tiene alguna idea de lo que se está volviendo loco?
En angular 2x
En example.component.ts
import { Observable } from ''rxjs'';
En example.component.html
Observable.interval(2000).map(valor => ''Async value'');
En Angular 5x o Angular 6x:
En example.component.ts
import { Observable, interval, pipe } from ''rxjs'';
import {switchMap, map} from ''rxjs/operators'';
En example.component.html
valorAsync = interval(2500).pipe(map(valor => ''Async value''));
Actualicé mi complemento gulp-typescript a la última versión (2.13.0) y ahora se compila sin problemas.
ACTUALIZACIÓN 1: anteriormente estaba usando gulp-typescript versión 2.12.0
ACTUALIZACIÓN 2: Si está actualizando a Angular 2.0.0-rc.1, debe hacer lo siguiente en su archivo appBoot.ts:
///<reference path="./../typings/browser/ambient/es6-shim/index.d.ts"/>
import { bootstrap } from "@angular/platform-browser-dynamic";
import { ROUTER_PROVIDERS } from ''@angular/router-deprecated'';
import { HTTP_PROVIDERS } from ''@angular/http'';
import { AppComponent } from "./path/AppComponent";
import ''rxjs/add/operator/map'';
import ''rxjs/add/operator/toPromise'';
// import ''rxjs/Rx''; this will load all features
import { enableProdMode } from ''@angular/core'';
import { Title } from ''@angular/platform-browser'';
//enableProdMode();
bootstrap(AppComponent, [
ROUTER_PROVIDERS,
HTTP_PROVIDERS,
Title
]);
Lo importante es la referencia a es6-shim / index.d.ts
Esto supone que ha instalado los tipos de es6-shim como se muestra aquí:
Más información sobre la instalación de tipings desde Angular aquí: https://angular.io/docs/ts/latest/guide/typescript-configuration.html#!#typings
Aparecerán mensajes de error similares al pasar de la versión 5 a la 6. Aquí hay una respuesta para el cambio a rxjs-6.
Importe los operadores individuales, luego use
pipe
lugar de encadenar.
import { map, delay, catchError } from ''rxjs/operators'';
source.pipe(
map(x => x + x),
delay(4000),
catchError(err => of(''error found'')),
).subscribe(printResult);
Como Justin Scofield ha sugerido en su respuesta, para el último lanzamiento de Angular 5 y para Angular 6, a partir del 1 de junio de 2018, solo
import ''rxjs/add/operator/map'';
no es suficiente para eliminar el error TS:
[ts] Property ''map'' does not exist on type ''Observable<Object>''.
Es necesario ejecutar el siguiente comando para instalar las dependencias requeridas:
npm install rxjs@6 rxjs-compat@6 --save
después de lo cual se resuelve el error de dependencia de importación de
map
!
En mi caso, no sería suficiente incluir solo el mapa y la promesa:
import ''rxjs/add/operator/map'';
import ''rxjs/add/operator/toPromise'';
Resolví este problema importando varios componentes de rxjs como recomienda la documentación oficial :
1) Importar declaraciones en un archivo app / rxjs-operator.ts:
// import ''rxjs/Rx''; // adds ALL RxJS statics & operators to Observable
// See node_module/rxjs/Rxjs.js
// Import just the rxjs statics and operators we need for THIS app.
// Statics
import ''rxjs/add/observable/throw'';
// Operators
import ''rxjs/add/operator/catch'';
import ''rxjs/add/operator/debounceTime'';
import ''rxjs/add/operator/distinctUntilChanged'';
import ''rxjs/add/operator/map'';
import ''rxjs/add/operator/switchMap'';
import ''rxjs/add/operator/toPromise'';
2) Importa el operador rxjs en tu servicio:
// Add the RxJS Observable operators we need in this app.
import ''./rxjs-operators'';
Estaba enfrentando el error similar. Se resolvió cuando hice estas tres cosas:
-
Actualice a los últimos rxjs:
npm install rxjs@6 rxjs-compat@6 --save
-
Importar mapa y promesa:
import ''rxjs/add/operator/map''; import ''rxjs/add/operator/toPromise'';
-
Se agregó una nueva declaración de importación:
import { Observable, Subject, asapScheduler, pipe, of, from, interval, merge, fromEvent } from ''rxjs'';
Necesita importar el operador del
map
:
import ''rxjs/add/operator/map''
Parece que el último RxJS requiere el mecanografiado 1.8, por lo que el mecanografiado 1.7 informa el error anterior.
Resolví este problema actualizando a la última versión mecanografiada.
Rxjs 5.5 “La propiedad ''mapa'' no existe en el tipo Observable.
El problema estaba relacionado con el hecho de que necesita agregar tubería alrededor de todos los operadores.
Cambia esto,
this.myObservable().map(data => {})
a esto
this.myObservable().pipe(map(data => {}))
Y
Importar mapa como este,
import { map } from ''rxjs/operators'';
Resolverá tus problemas.
Según tengo entendido, se debe a la última actualización de
rxjs
.
Han cambiado algunos operadores y sintaxis.
A partir de entonces, deberíamos importar operadores
rx
como este
import { map } from "rxjs/operators";
en lugar de esto
import ''rxjs/add/operator/map'';
Y necesitamos agregar tubería alrededor de todos los operadores como este
this.myObservable().pipe(map(data => {}))
La fuente está here
Si está utilizando angular4, utilice el siguiente importación. deberia de funcionar .
importar ''rxjs / add / operator / map'';
Si está usando angular5 / 6, use el mapa con tubería e importe debajo de uno
importar {mapa} desde "rxjs / operadores";
Si ve este error en VS2015, hay un problema de github y solución mencionada aquí:
https://github.com/Microsoft/TypeScript/issues/8518#issuecomment-229506507
Esto me ayudó a resolver que el
property map does not exist on observable
problema
property map does not exist on observable
.
Además, asegúrese de tener la versión mecanografiada anterior a 1.8.2
ACTUALIZACIÓN 29 de septiembre de 2016 para Angular 2.0 Final y VS 2015
La solución ya no es necesaria, para solucionarlo solo necesita instalar TypeScript versión 2.0.3 .
Arreglo tomado de la edición en https://github.com/Microsoft/TypeScript/issues/8518#issuecomment-229506507 .
la propiedad ''mapa'' no existe en el tipo ''respuesta observable'' angular 6
Solución: actualice la CLI angular y la versión principal
ng update @angular/cli //Update Angular CLi
ng update @angular/core //Update Angular Core
npm install --save rxjs-compat //For Map Call For Post Method
import ''rxjs/add/operator/map'';
Y
npm install rxjs@6 rxjs-compat@6 --save
trabajó para mi