Angular 2 beta.17: La propriété ‘map’ n’existe pas sur le type ‘Observable ‘

Je viens de mettre à jour Angular2 beta16 vers beta17, qui nécessite à son tour la version 5.0.0-beta.6 de rxjs. (Changelog ici: https://github.com/angular/angular/blob/master/CHANGELOG.md#200-beta17-2016-04-28 ) En bêta16, tout fonctionnait bien en ce qui concerne la fonctionnalité Observable / map. Les erreurs suivantes sont apparues après la mise à niveau et ont eu lieu lors de tentatives de transposition:

  1. La propriété ‘map’ n’existe pas sur le type ‘Observable’ (n’importe où où j’ai utilisé la carte avec une observable)
  2. c: /path/node_modules/rxjs/add/operator/map.d.ts (2,16): erreur TS2435: Les modules ambiants ne peuvent pas être nesteds dans d’autres modules ou espaces de noms.
  3. c: /path/node_modules/rxjs/add/operator/map.d.ts (2,16): erreur TS2436: La déclaration du module ambiant ne peut pas spécifier le nom du module relatif.

J’ai vu cette question / réponse mais cela ne résout pas le problème: Erreurs observables avec Angular2 beta.12 et RxJs 5 beta.3

Mon appBoot.ts ressemble à ceci (je fais déjà référence à rxjs / map):

/// import {bootstrap} from "angular2/platform/browser"; import {ROUTER_PROVIDERS} from 'angular2/router'; import {HTTP_PROVIDERS} from 'angular2/http'; [stuff] import 'rxjs/add/operator/map'; import 'rxjs/add/operator/toPromise'; import {enableProdMode} from 'angular2/core'; import { Title } from 'angular2/platform/browser'; //enableProdMode(); bootstrap(AppDesktopComponent, [ ROUTER_PROVIDERS, HTTP_PROVIDERS, Title ]); 

Quelqu’un a une idée de ce qui se passe?

Vous devez importer l’opérateur de map :

 import 'rxjs/add/operator/map' 

J’ai mis à jour mon plugin gulp-typescript vers la dernière version (2.13.0) et maintenant il se comstack sans accroc.

MISE À JOUR 1: J’utilisais précédemment la version 2.12.0 de gulp-typescript

MISE À JOUR 2: Si vous effectuez une mise à niveau vers Angular 2.0.0-rc.1, vous devez effectuer les opérations suivantes dans votre fichier appBoot.ts:

 /// import { bootstrap } from "@angular/platform-browser-dynamic"; import { ROUTER_PROVIDERS } from '@angular/router-deprecated'; import { HTTP_PROVIDERS } from '@angular/http'; import { AppComponent } from "./path/AppComponent"; import 'rxjs/add/operator/map'; import 'rxjs/add/operator/toPromise'; // import 'rxjs/Rx'; this will load all features import { enableProdMode } from '@angular/core'; import { Title } from '@angular/platform-browser'; //enableProdMode(); bootstrap(AppComponent, [ ROUTER_PROVIDERS, HTTP_PROVIDERS, Title ]); 

La chose importante étant la référence à es6-shim / index.d.ts

Cela suppose que vous avez installé les caractères es6-shim comme indiqué ici: entrer la description de l'image ici

Plus d’informations sur les typages installées depuis Angular ici: https://angular.io/docs/ts/latest/guide/typescript-configuration.html#!#typings

Rxjs 5.5 “La propriété map ‘n’existe pas sur le type Observable.

Le problème était lié au fait que vous deviez append des canaux à tous les opérateurs.

Change ça,

 this.myObservable().map(data => {}) 

pour ça

 this.myObservable().pipe(map(data => {})) 

Et

Importer une carte comme celle-ci,

 import { map } from 'rxjs/operators'; 

Cela résoudra vos problèmes.

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) Importer 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 rxjs-operator dans votre service:

 // Add the RxJS Observable operators we need in this app. import './rxjs-operators'; 

S’il vous arrive de voir cette erreur dans VS2015, il y a un problème avec github et une solution de contournement mentionnée ici:

https://github.com/Microsoft/TypeScript/issues/8518#issuecomment-229506507

Cela m’a aidé à résoudre le problème de la property map does not exist on observable . En outre, assurez-vous d’avoir la version typescripte ci-dessus 1.8.2

 import 'rxjs/add/operator/map'; 

Et

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

travaillé pour moi

MISE À JOUR 29 sept. 2016 pour Angular 2.0 Final & VS 2015

La solution de contournement n’est plus nécessaire, pour réparer il vous suffit d’ installer TypeScript version 2.0.3 .

Correction apscope à l’édition de ce commentaire de problème github .

En angular 2x

Dans example.component.ts

 import { Observable } from 'rxjs'; 

Dans example.component.html

  Observable.interval(2000).map(valor => 'Async value'); 

En angular 5x ou angular 6x:

Dans example.component.ts

 import { Observable, interval, pipe } from 'rxjs'; import {switchMap, map} from 'rxjs/operators'; 

Dans example.component.html

 valorAsync = interval(2500).pipe(map(valor => 'Async value')); 

Comme Justin Scofield l’a suggéré dans sa réponse pour la dernière version d’Angular 5 et pour Angular 6, au 1er juin 2018, import 'rxjs/add/operator/map'; simplement import 'rxjs/add/operator/map'; ne suffit pas pour supprimer l’erreur TS: [ts] Property 'map' does not exist on type 'Observable'.

Il est nécessaire d’exécuter la commande ci-dessous pour installer les dépendances requirejses: npm install rxjs@6 rxjs-compat@6 --save après quoi l’erreur de dépendance d’importation de la map est résolue!

Il semble que la dernière version de RxJS nécessite le typeScript 1.8, donc le typage 1.7 signale l’erreur ci-dessus.

J’ai résolu ce problème en mettant à niveau la dernière version typescripte.

LA RÉPONSE FINALE À CEUX QUI UTILISENT L’ANGULAIRE 6:

Ajoutez la commande ci-dessous dans votre fichier * .service.ts

 import { map } from "rxjs/operators"; **********************************************Example**Below************************************** getPosts(){ this.http.get('http://jsonplaceholder.typicode.com/posts') .pipe(map(res => res.json())); } } 

J’utilise Windows 10;

angular6 avec typescript V 2.3.4.0

Des messages d’erreur similaires apparaîtront lors de la transition de la version 5 à la version 6. Voici une réponse à la modification de rxjs-6.

Importez les opérateurs individuels, puis utilisez pipe au lieu de chaîner.

 import { map, delay, catchError } from 'rxjs/operators'; source.pipe( map(x => x + x), delay(4000), catchError(err => of('error found')), ).subscribe(printResult); 

Si je comprends bien, c’est à cause de la dernière mise à jour de rxjs . Ils ont changé certains opérateurs et syntaxe. Par la suite, nous devrions importer des opérateurs de ce type

import { map } from "rxjs/operators";

au lieu de cela

 import 'rxjs/add/operator/map'; 

Et nous devons append des tuyaux à tous les opérateurs comme celui-ci

this.myObservable().pipe(map(data => {}))

La source est ici

Je faisais face à l’erreur similaire. Il a été résolu quand j’ai fait ces trois choses:

  1. Mise à jour des derniers rxjs:

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

  1. Importer la carte et promettre:

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

  2. Ajout d’une nouvelle déclaration d’importation:

import { Observable, Subject, asapScheduler, pipe, of, from, interval, merge, fromEvent } from 'rxjs';

Si vous utilisez angular4, l’utilisation ci-dessous est imscope. ça devrait marcher.

import ‘rxjs / add / operator / map’;

Si vous utilisez angular5 / 6, utilisez la carte avec pipe et importez-en une

import {map} de “rxjs / operators”;