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

ts la propiedad map no existe en el tipo observable response>''

Question

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.

Answer 1

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

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

Y luego puede usar estos methods siguiente manera:

   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 demo para más detalles.

Answer 2

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

Answer 3

En rxjs 6, el uso del operador del mapa 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

Answer 4

Estoy usando Angular 5.2 y cuando 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.

Answer 5

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.

Answer 6

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

Answer 7

Necesita importar el operador del map :

import ''rxjs/add/operator/map''

O más generalmente:

import ''rxjs/Rx'';

Aviso: Para las versiones de RxJS 6.xx y superiores, deberá utilizar 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ó el soporte para usar Vea los cambios importantes en el registro de cambios de RxJS para obtener más información.

Desde el registro de cambios:

operadores : los operadores canalizables ahora deben importarse de rxjs de la siguiente manera: import { map, filter, switchMap } from ''rxjs/operators''; . No hay importaciones profundas.

Answer 8

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

Answer 9

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.

Answer 10

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

npm install --save rxjs-compat@6

Ahora necesita importar rxjs en service.ts :

import ''rxjs/Rx''; 

Voila! El problema ha sido resuelto.

Answer 11

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

Espero que ayude.

Answer 12

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

Answer 13

Simplemente instale rxjs-compat para resolver el problema

npm i rxjs-compat --save-dev

E importarlo como a continuación

import ''rxjs/Rx'';

Answer 14

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

Answer 15

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

Answer 16

Use la función de map en la función de pipe y resolverá su problema. Puedes consultar la documentación here .

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

Answer 17

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

Answer 18

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

Answer 19

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

npm install rxjs-compat

Debe importar el operador del map escribiendo esto:

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

Answer 20

simplemente instale rxjs-compat escribiendo en la terminal:

npm install --save rxjs-compat

luego importar:

import ''rxjs/Rx'';

Answer 21

  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.

Answer 22

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.