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

Estoy tratando de llamar a una API desde Angular pero recibo este error:

Property 'map' does not exist on type 'Observable<Response>'

Las respuestas de esta pregunta similar no resolvieron mi problema: Angular 2 beta.17: la propiedad 'map' no existe en el tipo 'Observable <Response>' .

Estoy usando Angular 2.0.0-beta.17.

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.

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

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

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

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

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

simplemente instale rxjs-compat escribiendo terminal:

npm install --save rxjs-compat

luego importar:

import 'rxjs/Rx';

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.

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

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.

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

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:

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.

Simplemente instale rxjs-compat para resolver el problema

npm i rxjs-compat --save-dev

E importarlo como a continuación

import 'rxjs/Rx';

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.

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

Se recomienda aquí

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.

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

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á.

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.

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

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

  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.

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