La propiedad 'map' no existe en el tipo 'Observable <Response>'

Respuestas:

371

Necesita importar el mapoperador:

import 'rxjs/add/operator/map'

O más generalmente:

import 'rxjs/Rx';

Aviso: Para las versiones de RxJS 6.x.xy superiores, deberá usar operadores canalizables como se muestra en el fragmento de código a continuación:

import { map } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';

// ...
export class MyComponent {
  constructor(private http: HttpClient) { }
  getItems() {
    this.http.get('https://example.com/api/items').pipe(map(data => {})).subscribe(result => {
      console.log(result);
    });
  }
}

Esto es causado por el equipo de RxJS que eliminó la compatibilidad para usar. Consulte los cambios importantes en el registro de cambios de RxJS para obtener más información.

Desde el registro de cambios:

operadores : los operadores Pipeable ahora deben ser importados de rxjs este modo: import { map, filter, switchMap } from 'rxjs/operators';. No hay importaciones profundas.

Thierry Templier
fuente
Nombre de módulo no válido en aumento, no se puede encontrar el módulo '../../Observable'. La propiedad 'map' no existe en el tipo 'Observable <Response>'.
Malik Cachemira
¿Cómo importas la Observableclase? De esta manera: import {Observable} from 'rxjs/Observable';o import {Observable} from 'rxjs/Rx';?
Thierry Templier
No estoy importando esta clase hasta ahora
Malik Kashmiri
1
Estoy usando Angular 2 RC1 y rxjs 5.0.0-beta2. He importado Observable como import {Observable} de 'rxjs / observable'; y operador de mapa importado como importar 'rxjs / add / operator / map'; Estaba funcionando cuando estaba usando Beta 7. Acabo de actualizar a RC1 y se rompió.
Darshan Puranik
44
Primero escriba este comando en el terminal vs code de su proyecto y reinicie el proyecto. npm install rxjs-compat, que importar el mapoperador.
Karan Raiyani
162

Revisando esto porque mi solución no aparece aquí.

Estoy ejecutando Angular 6 con rxjs 6.0 y me encontré con este error.

Esto es lo que hice para solucionarlo:

Cambié

map((response: any) => response.json())

simplemente ser:

.pipe(map((response: any) => response.json()));

Encontré la solución aquí:

https://github.com/angular/angular/issues/15548#issuecomment-387009186

Nick Hodges
fuente
1
No estoy seguro de por qué la herramienta de migración rxjs-5-to-6-migrate no capta esto. Es interesante que no aborde la reasignación do / tap que en mi entorno aún no está resuelta a pesar de que la herramienta de importación lo reconoce. El 90% de mi 'tiempo perdido no anticipado' en el desarrollo angular lo paso con problemas de límites de código y documentos RxJS, esto es realmente frustrante.
Joe
1
¡Gracias! ¡¡Eres un salvavidas!! Quien esté interesado, la referencia completa de este cambio está disponible aquí: github.com/ReactiveX/rxjs/blob/master/…
malvadao
22
Esto funcionó para mí, también necesitaba agregarimport { map } from 'rxjs/operators';
Paul
Es curioso, así es exactamente como lo arreglamos en la actualización angular 6, que también trajo los últimos rxjs.
Max
2
@paul Gracias. En cuanto a .catch, podemos usar catchErrorcomo .pipe(catchError(this.handleError))?
FindOutIslamNow
60

simplemente escriba este comando en el terminal vs code de su proyecto y reinicie el proyecto.

npm install rxjs-compat

Debe importar el mapoperador escribiendo esto:

import 'rxjs/add/operator/map';
Karan Raiyani
fuente
1
si no funciona, cierre todos los archivos y reinicie vs studio.
Ajay Takur
1
Esto funcionó para mí, gracias por compartir.
thesamoanppprogrammer
30

Para el angular 7v

Cambio

import 'rxjs/add/operator/map';

A

import { map } from "rxjs/operators"; 

Y

 return this.http.get('http://localhost/ionicapis/public/api/products')
 .pipe(map(res => res.json()));
Nadeem Qasmi
fuente
me ayudó @ Katana24 cuando vi la sintaxis correcta con pipe.
punkologist
25

Tuve el mismo problema con Angular 2.0.1 porque estaba importando Observable desde

import { Observable } from 'rxjs/Observable';

En cambio, resuelvo mi problema al importar Observable desde esta ruta

import { Observable } from 'rxjs';
S.Galarneau
fuente
Se considera que esta práctica no es compatible con el tamaño del paquete, ya que esa declaración importa todos los operadores Observable(incluidos los que no usa) en el paquete. En su lugar, debe importar cada operador individualmente. Recomiendo el uso de "operadores de alquiler", que se introdujo en RxJS v5.5 para admitir una mejor sacudida del árbol.
Sarun Intaralawan
15

En rxjs 6, el uso del operador de mapas ha cambiado ahora, debe usarlo de esta manera.

import { map } from 'rxjs/operators';
myObservable
  .pipe(map(data => data * 2))
  .subscribe(...);

Para referencia https://www.academind.com/learn/javascript/rxjs-6-what-changed/#operators-update-path

Hari Prasad Sharma
fuente
Tome nota de esta respuesta, ya que cualquiera que lo RxJS v6haga necesitará usar .pipe()o ninguno de los operadores trabajará directamente desde el Observable. Verás un error como,Property 'share' does not exist on type 'Observable<{}>'
atconway
8

simplemente instale rxjs-compat escribiendo terminal:

npm install --save rxjs-compat

luego importar:

import 'rxjs/Rx';
Amir.S
fuente
8

En el último Angular 7. *. * , Puede probar esto simplemente como:

import { Observable, of } from "rxjs";
import { map, catchError } from "rxjs/operators";

Y luego puede usarlos de la siguiente methodsmanera:

   private getHtml(): Observable<any> {
    return this.http.get("../../assets/test-data/preview.html").pipe(
      map((res: any) => res.json()),
      catchError(<T>(error: any, result?: T) => {
        console.log(error);
        return of(result as T);
      })
    );
  }

Consulte esta demostración para más detalles.

Hearen
fuente
5

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
Siento que no es correcto incluir operadores rxjs en todos los servicios. Debe incluirse solamente en app.module.ts pero desafortunadamente ng prueba de lanza de error si los operadores no se importan en lugares específicos
Mohan Ram
5
import { map } from "rxjs/operators";

getGetFunction(){
this.http.get('http://someapi')
.pipe(map(res => res));
}

getPostFunction(yourPara){
this.http.get('http://someapi',yourPara)
.pipe(map(res => res));
}

En la función anterior puede ver que no usé res.json () ya que estoy usando HttpClient. Aplica res.json () automáticamente y devuelve Observable (HttpResponse <string>). Ya no necesita llamar a esta función después del angular 4 en HttpClient.

Dushan
fuente
3

Tuve el mismo problema, estaba usando Visual Studio 2015 que tenía una versión anterior del mecanografiado.

Después de actualizar la extensión, el problema se resolvió.

Enlace de descarga

Naveen
fuente
3

Estoy usando Angular 5.2 y cuando lo uso import 'rxjs/Rx';me arroja el siguiente error de pelusa: TSLint: esta importación está en la lista negra, importa un submódulo en su lugar (import-blacklist)

Vea la captura de pantalla a continuación: La importación de rxjs / Rx está en la lista negra en Angular 5.2

SOLUCIÓN: Lo resolví importando solo los operadores que necesitaba . El siguiente ejemplo:

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

Entonces, la solución sería importar específicamente solo los operadores necesarios.

Devner
fuente
@ AndrewBenjamin Te recomiendo que hagas eso. Eso te ahorrará muchos problemas en el camino.
Devner
3

Simplemente instale rxjs-compat para resolver el problema

npm i rxjs-compat --save-dev

E importarlo como a continuación

import 'rxjs/Rx';
Ankit Bhatia
fuente
3

Primero, ejecute la instalación de la siguiente manera:

npm install --save rxjs-compat@6

Ahora necesita importar rxjsen service.ts:

import 'rxjs/Rx'; 

Voila! El problema ha sido resuelto.

Brahmmeswara Rao Palepu
fuente
3

simplemente ejecutarlo npm install --save rxjs-compatcorrige el error.

Se recomienda aquí

trustidkid
fuente
No olvide importar 'rxjs / add / operator / map'
trustidkid
2

Intenté todas las respuestas posibles publicadas arriba, ninguna de ellas funcionó,

Lo resolví simplemente reiniciando mi IDE, es decir, Visual Studio Code

Que ayude a alguien.

Shylendra Madda
fuente
2

Yo también enfrenté el mismo error. Una solución que funcionó para mí fue agregar las siguientes líneas en su archivo service.ts en lugar de import 'rxjs/add/operator/map':

import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

Por ejemplo, mi app.service.ts después de la depuración fue como,

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable()
export class AppService {
    constructor(private http: HttpClient) {}
    getData(): Observable<any> {
        return this.http.get('https://samples.openweathermap.org/data/2.5/history/city?q=Warren,OH&appid=b6907d289e10d714a6e88b30761fae22')
        .pipe(map(result => result));
    }
}
Steffi Keran Rani J
fuente
2

Si después de importar importar 'rxjs / add / operator / map' o importar 'rxjs / Rx' también obtiene el mismo error, reinicie su editor de código visual studio, el error se resolverá.


fuente
1

Para todos los usuarios de Linux que tienen este problema, verifique si la carpeta rxjs-compat está bloqueada. Tuve exactamente el mismo problema y entré en la terminal, usé el sudo su para dar permiso a toda la carpeta rxjs-compat y se solucionó. Eso es suponiendo que importaste

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch'; 

en el archivo project.ts donde ocurrió el error original .map.

JavaJunior
fuente
1

Use la mapfunción en pipefunción y resolverá su problema. Puedes consultar la documentación aquí .

this.items = this.afs.collection('blalal').snapshotChanges().pipe(map(changes => {
  return changes.map(a => {
    const data = a.payload.doc.data() as Items;
    data.id = a.payload.doc.id;
    return data;
  })
})
Mohammad Quanit
fuente
1

npm instalar rxjs @ 6 rxjs-compat @ 6 --save

Ajay Takur
fuente
0
  import { Injectable } from '@angular/core';
  import { Http } from '@angular/http';
  import 'rxjs/add/operator/map';

  @Injectable({
  providedIn: 'root'
  })
  export class RestfulService {

  constructor(public http: Http) { }

 //access apis Get Request 
 getUsers() {
 return this.http.get('http://jsonplaceholder.typicode.com/users')
  .map(res => res.json());
  }

 }

ejecuta el comando

 npm install rxjs-compat 

Solo importo

 import 'rxjs/add/operator/map';

reinicie el código vs, problema resuelto.

Nadeem Qasmi
fuente
-1

La nueva versión angular no es compatible con .map, tiene que instalar esto a través de cmd npm install: guarde rxjs-compat a través de esto, puede disfrutarlo con la técnica anterior. nota: no olvides importar estas líneas.

import { Observable, Subject } from 'rxjs';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
Shailaja valiveti
fuente
1
Esta respuesta tardía es redundante.
Tom Faltesek