Angular 2 beta.17: la propiedad 'map' no existe en el tipo 'Observable <Response>'

195

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:

  1. La propiedad 'mapa' no existe en el tipo 'Observable' (en cualquier lugar donde haya usado el mapa con un observable)
  2. 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.
  3. 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?

brando
fuente

Respuestas:

284

Necesita importar el mapoperador:

import 'rxjs/add/operator/map'
0x1ad2
fuente
3
El equipo Angular y el equipo RxJS NO recomiendan este enfoque de importar todo el RX de esta manera. No deberías hacer eso. Es muy grande La primera respuesta anterior está bien, pero la segunda, no tanto. @ 0x1ad2, ¿puede actualizar su respuesta para no incluir esa importación masiva como segunda opción?
helado
2
Esto no es intuitivo. ¿Dónde se documenta esto como una dependencia para implementar Observable en un desarrollo Angular 2+?
Joe
¿Es esto aplicable a iónico 3.20.0? Tengo el mismo problema porque iónico no importó automáticamente el mapa. Importar explícitamente funciona, pero no estoy seguro de que sea correcto.
LordDraagon
1
esto no soluciona el problema para muchos, tuve que usar Pipe en lugar de rxjs / add / operator / map. Utilicé rxjs / operadores import con pipe y .pipe (map (res => res.json ()));
codefreaK
Llegué aquí después de algunas búsquedas de Google en un momento en el que ahora estamos usando Angular 7 y RXJS ha experimentado algunos cambios. El nuevo método es import { map } from 'rxjs/operators', pero otra respuesta tiene más detalles.
Colby Hunter
78

Actualicé mi complemento gulp-typecript 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í: ingrese la descripción de la imagen 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

brando
fuente
¿Puede mencionar el número de versión anterior que tenía el problema? Gracias.
Meligy
1
@Meligy Anteriormente estaba usando gulp-typescript versión 2.12.0
brando
1
Increíble. He actualizado mi artículo sobre el mapmensaje de error para incluir una nota para usuarios con problemas similares. Muchas gracias :)
Meligy
1
@Meligy Tuve este mismo problema nuevamente cuando actualicé al Angular2 RC. Actualicé mi respuesta anterior para mostrar cómo lo resolví.
brando
66
import 'rxjs/Rx'; // Carga todas las funciones
VahidN
67

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.

Hiran DA Walawage
fuente
3
Esto también se aplica a Rxjs 6. Cada tutorial que miro, tienen la función de mapa sin canalización. Esto no funcionó para mí hasta que agregué la tubería y el mapa importado de 'rxjs / operadores' exactamente como dice la respuesta.
Keyvan Sadralodabai
Sí, también se aplica a Rxjs 6 también.
Hiran DA Walawage
41

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';
Alex Valchuk
fuente
Una vez más, la mejor respuesta a la pregunta no tiene la mayoría de los votos. Esta es la mejor respuesta para esta pregunta. Gracias por compartir. Desearía que otros votaran esto.
helado
26

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 el property map does not exist on observableproblema. Además, asegúrese de tener la versión mecanografiada anterior a 1.8.2

Abu Abdullah
fuente
8
Reemplazar C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\CommonExtensions\Microsoft\TypeScript\typescriptServices.js con typecriptService funcionó para VS 15. ( reiniciar vs después de reemplazar el archivo )
tchelidze
reemplazar el archivo mencionado anteriormente también funcionó para mí
Krishnan
Todavía no hay actualización de Microsoft ... ¿Por qué no lo están arreglando?
Piotrek
26

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

Smit Patel
fuente
Parece que ya no podemos importarlo en app.module.ts. Ahora tenemos que importarlo en cada servicio y componente
Adam Mendoza
15
import 'rxjs/add/operator/map';

Y

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

trabajó para mi

Justin Lange
fuente
13

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'));
Eduardo Cordeiro
fuente
1
¿Por qué necesitamos usar tubería en lugar de mapear directamente?
Krish
10

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 este comentario de problema de github .

Jason
fuente
3
Tengo este problema, también tengo 2.0.3 instalado: /
Mild Fuzz
1
Tengo TS 2.1.6 pero sigo viendo el problema
alltej
En el momento de este comentario, TS más reciente es 2.5.2. Esta versión me está rompiendo. Usar 2.3.x funciona.
PigBoT
10

Según tengo entendido, se debe a la rxjsúltima actualización. Han cambiado algunos operadores y sintaxis. A partir de entonces, deberíamos importar rxoperadores 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á aquí

Gh111
fuente
9

Como Justin Scofield ha sugerido en su respuesta, para el último lanzamiento de Angular 5 y para Angular 6, como el 1 de junio de 2018, simplemente 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 --savedespués de lo cual mapse resuelve el error de dependencia de importación!

Nitin Bhargava
fuente
1
Parece que hay más cambios importantes, lo cual es preocupante
Noobie3001
8

Estaba enfrentando el error similar. Se resolvió cuando hice estas tres cosas:

  1. Actualice a los últimos rxjs:

    npm install rxjs@6 rxjs-compat@6 --save
  2. Importar mapa y promesa:

    import 'rxjs/add/operator/map';
    import 'rxjs/add/operator/toPromise';
  3. Se agregó una nueva declaración de importación:

    import { Observable, Subject, asapScheduler, pipe, of, from, interval, merge, fromEvent } from 'rxjs';
lokanath
fuente
7

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.

romano
fuente
Si está utilizando un tsccomando, compruebe tsc -v;-) Usar "scripts" es una idea aún mejor, consulte stackoverflow.com/a/37034227/478584
tomaszbak
6

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 en pipelugar de encadenar.

import { map, delay, catchError } from 'rxjs/operators'; 

source.pipe(
  map(x => x + x),
  delay(4000),
  catchError(err => of('error found')),
).subscribe(printResult);
farrellw
fuente
6

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";

Manas
fuente
1

la propiedad 'mapa' no existe en el tipo 'respuesta observable' angular 6

Solución: actualice CLI angular y 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 
Jaydeepsinh Makwana
fuente