La propriété 'map' n'existe pas sur le type 'Observable <Response>'

J'essaie d'appeler une API depuis Angular mais j'obtiens cette erreur:

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

Les réponses à cette question similaire n'ont pas résolu mon problème: Angular 2 beta.17: La propriété 'map' n'existe pas sur le type 'Observable <Response>' .

J'utilise Angular 2.0.0-beta.17.

Vous devez importer l' mapopérateur:

import 'rxjs/add/operator/map'

Ou plus généralement:

import 'rxjs/Rx';

Remarque: pour les versions de RxJS 6.x.xet supérieures, vous devrez utiliser des opérateurs canalisables comme indiqué dans l'extrait de code ci-dessous:

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

Ceci est causé par l'équipe RxJS supprimant le support en utilisant Voir les changements de rupture dans changelog « RxJS pour plus d' informations.

Depuis le changelog:

opérateurs : les opérateurs Pipeable doivent maintenant être importés de rxjs comme ceci: import { map, filter, switchMap } from 'rxjs/operators';. Pas d'importations profondes.

Revisiter cela parce que ma solution n'est pas répertoriée ici.

J'utilise Angular 6 avec rxjs 6.0 et j'ai rencontré cette erreur.

Voici ce que j'ai fait pour y remédier:

j'ai changé

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

être simplement:

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

J'ai trouvé le correctif ici:

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

il suffit d'écrire cette commande dans le terminal vs code de votre projet et de redémarrer le projet.

npm install rxjs-compat

Vous devez importer l' mapopérateur en écrivant ceci:

import 'rxjs/add/operator/map';

Pour le 7v angulaire

Changement

import 'rxjs/add/operator/map';

À

import { map } from "rxjs/operators"; 

Et

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

J'ai eu le même problème avec Angular 2.0.1 parce que j'importais Observable depuis

import { Observable } from 'rxjs/Observable';

Je résout mon problème lors de l'importation d'Observable à partir de ce chemin

import { Observable } from 'rxjs';

Dans rxjs 6, l'utilisation de l'opérateur de carte a été modifiée, vous devez maintenant l'utiliser comme ceci.

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

Pour référence https://www.academind.com/learn/javascript/rxjs-6-what-changed/#operators-update-path

installez simplement rxjs-compat en tapant dans terminal:

npm install --save rxjs-compat

puis importez:

import 'rxjs/Rx';

Dans le dernier Angular 7. *. * , Vous pouvez essayer ceci simplement comme:

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

Et puis vous pouvez les utiliser methodscomme suit:

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

Consultez cette démo pour plus de détails.

Dans mon cas, il ne suffirait pas d'inclure uniquement la carte et la promesse:

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

J'ai résolu ce problème en important plusieurs composants rxjs comme le recommande la documentation officielle :

1) Importez des instructions dans un fichier app / rxjs-operators.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) Importez l'opérateur rxjs lui-même dans votre service:

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

Dans la fonction ci-dessus, vous pouvez voir que je n'ai pas utilisé res.json () depuis que j'utilise HttpClient. Il applique res.json () automatiquement et renvoie Observable (HttpResponse <chaîne>). Vous n'avez plus besoin d'appeler cette fonction vous-même après angular 4 dans HttpClient.

J'ai eu le même problème, j'utilisais Visual studio 2015 qui avait une ancienne version de dactylographiée.

Après la mise à niveau de l'extension, le problème a été résolu.

Lien de téléchargement

J'utilise Angular 5.2 et lorsque je l'utilise, import 'rxjs/Rx';cela me génère l'erreur de peluche suivante: TSLint: cette importation est sur liste noire, importez plutôt un sous-module (import-blacklist)

Voir la capture d'écran ci-dessous:

SOLUTION: Résolu en n'important que les opérateurs dont j'avais besoin . Voici un exemple:

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

Le correctif consisterait donc à n'importer spécifiquement que les opérateurs nécessaires.

Installez simplement rxjs-compat pour résoudre le problème

npm i rxjs-compat --save-dev

Et l'importer comme ci-dessous

import 'rxjs/Rx';

Exécutez tout d'abord l'installation comme ci-dessous:

npm install --save rxjs-compat@6

Vous devez maintenant importer rxjsdans service.ts:

import 'rxjs/Rx'; 

Voila! Le problème a été résolu.

il suffit de l'exécuter npm install --save rxjs-compatpour corriger l'erreur.

Il est recommandé ici

J'ai essayé toutes les réponses possibles affichées ci-dessus, aucune d'entre elles n'a fonctionné,

Je l'ai résolu en redémarrant simplement mon IDE, c'est-à-dire Visual Studio Code

Qu'il aide quelqu'un.

Moi aussi, j'ai fait face à la même erreur. Une solution qui a fonctionné pour moi a été d'ajouter les lignes suivantes dans votre fichier service.ts au lieu de import 'rxjs/add/operator/map':

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

Par exemple, mon app.service.ts après le débogage était comme,

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 après l'importation de l'importation 'rxjs / add / operator / map' ou de l'importation 'rxjs / Rx' vous obtenez également la même erreur, redémarrez votre éditeur de code Visual Studio, l'erreur sera résolue.

pour tous les utilisateurs Linux qui rencontrent ce problème, vérifiez si le dossier rxjs-compat est verrouillé. J'ai eu exactement le même problème et je suis allé dans le terminal, j'ai utilisé le sudo su pour donner la permission à tout le dossier rxjs-compat et il a été corrigé. C'est en supposant que vous avez importé

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

dans le fichier project.ts où l'erreur d'origine .map s'est produite.

Utilisez la mapfonction en pipefonction et cela résoudra votre problème. Vous pouvez consulter la documentation ici .

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

 }

exécutez la commande

 npm install rxjs-compat 

Je viens d'importer

 import 'rxjs/add/operator/map';

redémarrez le code vs, problème résolu.

La nouvelle version angulaire ne prend pas en charge .map, vous devez l'installer via cmd npm install --save rxjs-compat via ce que vous pouvez apprécier avec l'ancienne technique. remarque: n'oubliez pas d'importer ces lignes.

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