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

Réponses:

371

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.

Thierry Templier
la source
Nom de module non valide dans l'extension, le module '../../Observable' est introuvable. La propriété 'map' n'existe pas sur le type 'Observable <Response>'.
Malik Kashmiri
Comment importez-vous la Observableclasse? Comme ça: import {Observable} from 'rxjs/Observable';ou import {Observable} from 'rxjs/Rx';?
Thierry Templier
je ne suis pas en train d'importer cette classe jusqu'à présent
Malik Kashmiri
1
J'utilise Angular 2 RC1 et rxjs 5.0.0-beta2. J'ai importé Observable en tant qu'import {Observable} de 'rxjs / observable'; et un opérateur de carte importé comme l'importation «rxjs / add / operator / map»; Cela fonctionnait lorsque j'utilisais la Bêta 7. Je viens de passer à RC1 et ça s'est cassé.
Darshan Puranik
4
Écrivez d'abord cette commande dans le terminal vs code de votre projet et redémarrez le projet. npm install rxjs-compat, que d'importer l' mapopérateur.
Karan Raiyani
162

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

Nick Hodges
la source
1
Je ne sais pas pourquoi l'outil de migration rxjs-5-to-6-migrate ne capte pas cela? Il est intéressant de noter qu'il ne traite pas du remappage do / tap qui, dans mon environnement, n'est toujours pas résolu même si l'outil d'importation le reconnaît. 90% de mon «temps perdu imprévu» dans le développement angulaire est consacré aux problèmes de limites de document et de code RxJS, c'est vraiment frustrant.
Joe
1
Je vous remercie! Tu es un sauveur!! Quiconque est intéressé, la référence complète de ce changement est disponible ici: github.com/ReactiveX/rxjs/blob/master/…
malvadao
22
Cela a fonctionné pour moi, je devais également ajouterimport { map } from 'rxjs/operators';
paul
C'est drôle, c'est exactement comme cela que nous l'avons corrigé sur la mise à niveau angular 6 - qui a également apporté les derniers rxjs.
Max
2
@paul Merci. En ce qui concerne .catch, nous pouvons utiliser catchErrorcomme .pipe(catchError(this.handleError))?
FindOutIslamNow
60

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';
Karan Raiyani
la source
1
si cela ne fonctionne pas, fermez tous les fichiers et redémarrez le vs studio.
Ajay Takur
1
Cela a fonctionné pour moi, merci pour le partage.
thesamoanppprogrammer
30

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()));
Nadeem Qasmi
la source
cela m'a aidé @ Katana24 car j'ai vu la syntaxe correcte avec pipe.
punkologist
25

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';
S.Galarneau
la source
Cette pratique n'est pas considérée comme compatible avec la taille des bundles car cette instruction importe tous les opérateurs Observable(y compris ceux que vous n'utilisez pas) dans le bundle. Au lieu de cela, vous devez importer chaque opérateur individuellement. Je recommande d'utiliser des "opérateurs locables", qui ont été introduits dans RxJS v5.5 pour prendre en charge un meilleur tremblement d'arbre.
Sarun Intaralawan
15

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

Hari Prasad Sharma
la source
Prenez note de cette réponse car quiconque le RxJS v6fera devra utiliser le .pipe()ou aucun des opérateurs ne fonctionnera directement depuis l'Observable. Vous verrez une erreur comme,Property 'share' does not exist on type 'Observable<{}>'
atconway
8

installez simplement rxjs-compat en tapant dans terminal:

npm install --save rxjs-compat

puis importez:

import 'rxjs/Rx';
Amir.S
la source
8

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.

Hearen
la source
5

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';
Alex Valchuk
la source
Je pense qu'il n'est pas juste d'inclure les opérateurs rxjs dans tous les services. Il ne devrait être inclus que sur app.module.ts mais malheureusement, le test ng génère une erreur si les opérateurs ne sont pas importés dans des endroits spécifiques
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));
}

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.

Dushan
la source
3

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

Naveen
la source
3

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: L'importation de rxjs / Rx est sur liste noire dans Angular 5.2

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.

Devner
la source
@AndrewBenjamin Je suggère fortement que vous fassiez cela. Cela vous évitera beaucoup de problèmes sur la voie.
Devner
3

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';
Ankit Bhatia
la source
3

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.

Brahmmeswara Rao Palepu
la source
3

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

Il est recommandé ici

trustidkid
la source
N'oubliez pas d'importer 'rxjs / add / operator / map'
trustidkid
2

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.

Shylendra Madda
la source
2

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));
    }
}
Steffi Keran Rani J
la source
2

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.


la source
1

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.

JavaJunior
la source
1

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;
  })
})
Mohammad Quanit
la source
1

npm install rxjs @ 6 rxjs-compat @ 6 --save

Ajay Takur
la source
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());
  }

 }

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.

Nadeem Qasmi
la source
-1

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';
Shailaja valiveti
la source
1
Cette réponse tardive est redondante.
Tom Faltesek