A propriedade 'map' não existe no tipo 'Observable <Response>'

Estou tentando chamar uma API da Angular, mas estou recebendo este erro:

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

As respostas dessa pergunta semelhante não resolveram meu problema: Angular 2 beta.17: A propriedade 'map' não existe no tipo 'Observable <Response>' .

Estou usando o Angular 2.0.0-beta.17.

Você precisa importar o mapoperador:

import 'rxjs/add/operator/map'

Ou mais geralmente:

import 'rxjs/Rx';

Aviso: Para versões do RxJS 6.x.xe versões posteriores , você precisará usar operadores pipeable, conforme mostrado no snippet de código abaixo:

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

Isso é causado pela equipe do RxJS removendo o suporte ao uso. Veja as alterações mais recentes no log de alterações do RxJS para obter mais informações.

No changelog:

operadores : operadores Pipeable deve agora ser importados de rxjs assim: import { map, filter, switchMap } from 'rxjs/operators';. Nenhuma importação profunda.

Revisitando isso, porque minha solução não está listada aqui.

Estou executando o Angular 6 com rxjs 6.0 e me deparei com esse erro.

Aqui está o que eu fiz para corrigi-lo:

eu mudei

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

ser simplesmente:

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

Encontrei a correção aqui:

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

basta escrever este comando no terminal vs code do seu projeto e reiniciar o projeto.

npm install rxjs-compat

Você precisa importar o mapoperador, escreva isto:

import 'rxjs/add/operator/map';

Para o Angular 7v

mudança

import 'rxjs/add/operator/map';

Para

import { map } from "rxjs/operators"; 

E

 return this.http.get('http://localhost/ionicapis/public/api/products')
 .pipe(map(res => res.json()));

Eu tive o mesmo problema com o Angular 2.0.1 porque estava importando o Observable de

import { Observable } from 'rxjs/Observable';

Em vez disso, resolvo meu problema ao importar o Observable desse caminho

import { Observable } from 'rxjs';

No rxjs 6, o uso do operador do mapa foi alterado agora, você precisa usá-lo dessa maneira.

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

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

basta instalar o rxjs-compat digitando o terminal:

npm install --save rxjs-compat

depois importe:

import 'rxjs/Rx';

No mais recente Angular 7. *. * , Você pode tentar isso simplesmente como:

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

E então você pode usá-los da methodsseguinte maneira:

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

Confira esta demonstração para mais detalhes.

No meu caso, não basta incluir apenas o mapa e a promessa:

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

Resolvi esse problema importando vários componentes rxjs, como recomenda a documentação oficial :

1) Importar instruções em um arquivo 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) Importe o próprio operador rxjs no seu serviço:

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

Na função acima, você pode ver que eu não usei res.json () desde que estou usando HttpClient. Aplica res.json () automaticamente e retorna Observable (HttpResponse <string>). Você não precisa mais chamar essa função depois do angular 4 no HttpClient.

Eu tive o mesmo problema, estava usando o Visual studio 2015, que tinha uma versão mais antiga do texto datilografado.

Após a atualização da extensão, o problema foi resolvido.

Link para Download

Estou usando o Angular 5.2 e, quando o uso import 'rxjs/Rx';, gera o seguinte erro de fiapo: TSLint: Esta importação está na lista negra, importe um submódulo (import-blacklist)

Veja a imagem abaixo:

SOLUÇÃO: Resolvi importando apenas os operadores que eu precisava . Exemplo a seguir:

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

Portanto, a correção seria importar especificamente apenas os operadores necessários.

Basta instalar o rxjs-compat para resolver o problema

npm i rxjs-compat --save-dev

E importe-o como abaixo

import 'rxjs/Rx';

Antes de tudo, execute a instalação como abaixo:

npm install --save rxjs-compat@6

Agora você precisa importar rxjsem service.ts:

import 'rxjs/Rx'; 

Voila! O problema foi corrigido.

simplesmente execute npm install --save rxjs-compat-o corrige o erro.

É recomendado aqui

Eu tentei todas as respostas possíveis postadas acima, nenhuma delas funcionou,

Eu o resolvi simplesmente reiniciando meu IDE, ou seja, código do Visual Studio

Que isso ajude alguém.

Eu também enfrentei o mesmo erro. Uma solução que funcionou para mim foi adicionar as seguintes linhas no seu arquivo service.ts em vez de import 'rxjs/add/operator/map':

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

Por exemplo, meu app.service.ts após a depuração era 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));
    }
}

Se depois de importar import 'rxjs / add / operator / map' ou importar 'rxjs / Rx' você também receber o mesmo erro e reiniciar o editor de código do visual studio, o erro será resolvido.

para todos os usuários linux que estão tendo esse problema, verifique se a pasta rxjs-compat está bloqueada. Eu tive exatamente o mesmo problema e entrei no terminal, usei o sudo su para dar permissão a toda a pasta rxjs-compat e foi corrigido. Isso supõe que você importou

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

no arquivo project.ts em que ocorreu o erro .map original.

Use a mapfunção em pipefunction e isso resolverá o seu problema. Você pode verificar a documentação aqui .

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

 }

execute o comando

 npm install rxjs-compat 

Eu apenas importo

 import 'rxjs/add/operator/map';

reinicie o código vs, problema resolvido.

A nova versão angular não suporta .map, você precisa instalá-lo através do cmd npm install --save rxjs-compat através disso, você pode desfrutar com a técnica antiga. nota: não esqueça de importar essas linhas.

import { Observable, Subject } from 'rxjs';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';