Angle 2 beta.17: la Propriété 'map' n'existe pas sur le type 'Observables '

je viens de passer de L'angle 2 beta16 à beta17 , qui à son tour nécessite rxjs 5.0.0-beta.6. (Changelog ici: https://github.com/angular/angular/blob/master/CHANGELOG.md#200-beta17-2016-04-28 ) dans beta16 tout fonctionnait bien en ce qui concerne la fonctionnalité Observable/map. Les erreurs suivantes sont apparues après que j'ai mis à niveau et se produisent quand le code typographique tente de transpirer:

  1. Propriété "carte" n'existe pas sur le type 'Observables' (n'importe où où je l'ai utilisé une 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 imbriqués dans d'autres modules ou espaces de noms.
  3. c:/path/node_modules/rxjs/add/operator/map.d.ts(2,16): erreur TS2436: Ambiante déclaration de module ne peut pas spécifier un parent nom du module.

j'ai vu cette question/réponse mais elle ne résout pas le problème: erreurs observables avec Angular2 bêta.12 and RxJs 5 beta.3

mon apploot.ts ressemble à ceci (je me réfère déjà rxjs / carte):

///<reference path="./../node_modules/angular2/typings/browser.d.ts"/>
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 sait ce qui se passe?

170
demandé sur Yashwardhan Pauranik 2016-04-30 00:31:42

15 réponses

vous devez importer l'opérateur map :

import 'rxjs/add/operator/map'
275
répondu 0x1ad2 2017-08-25 13:45:12

j'ai mis à jour mon plugin goup-typescript à la dernière version (2.13.0) et maintenant il se compile sans problème.

mise à jour 1: j'ai déjà utilisé gulfp-typescript version 2.12.0

mise à jour 2: Si vous passez à L'angle 2.0.0-rc.1, vous devez faire ce qui suit dans votre appBoot.fichier ts:

///<reference path="./../typings/browser/ambient/es6-shim/index.d.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
]);

l'important étant la référence à es6-shim/index.d.ts

cela suppose que vous ont installé les typages es6-shim comme montré ici: enter image description here

plus sur les typographes installer à partir D'angle ici: https://angular.io/docs/ts/latest/guide/typescript-configuration.html#!#composition

75
répondu brando 2016-09-13 06:29:24

Rxjs 5.5 "Property' map ' n'existe pas sur type Observable.

le problème était lié au fait que vous devez ajouter un tuyau autour de tous les opérateurs.

Changer cela", 151940920"

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

à ce

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

et

carte d'Importation comme ça", 151940920"

import { map } from 'rxjs/operators';

ça résoudra vos problèmes.

47
répondu Hiran D.A Walawage 2018-05-18 06:49:53

dans mon cas, il ne suffirait pas d'inclure seulement 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 documentation officielle recommande:

1) déclarations D'importation dans un app/RxJS-opérateurs.fichier 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) Importation RxJS-opérateur lui - même à votre service:

// Add the RxJS Observable operators we need in this app.
import './rxjs-operators';
39
répondu Alex Valchuk 2016-09-23 07:35:30

si vous voyez cette erreur dans VS2015, il y a un problème de github et une solution mentionnée ici:

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

cela m'a aidé à résoudre le problème property map does not exist on observable . En outre, assurez-vous que vous avez la version dactylographiée au-dessus 1.8.2

25
répondu Abu Abdullah 2016-08-18 12:26:18
import 'rxjs/add/operator/map';

&

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

a travaillé pour moi

13
répondu Justin Scofield 2018-05-28 16:49:07

THE FINAL ANSWER FOR THOSE WHO USES ANGULAR 6:

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

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 tapuscrit V 2.3.4.0

12
répondu Smit Patel 2018-07-15 03:38:16

mise à JOUR Sep 29 2016 Angulaire 2.0 Finale & VS 2015

la solution n'est plus nécessaire, pour corriger vous avez juste besoin de installer la version 2.0.3 .

correction tirée de l'édition sur this github issue comment .

10
répondu Jason 2016-09-29 03:34:53

en angle 2x

par exemple.composant.ts

import { Observable } from 'rxjs';

par exemple.composant.html

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

en angle 5x ou 6x:

par exemple.composant.ts

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

par exemple.composant.html

valorAsync = interval(2500).pipe(map(valor => 'Async value'));
9
répondu Eduardo Cordeiro 2018-06-10 17:10:38

comme Justin Scofield l'a suggéré dans sa réponse, pour la dernière version D'Angular 5 et pour Angular 6, comme le 1er juin 2018, juste import 'rxjs/add/operator/map'; n'est pas suffisant pour supprimer l'erreur TS: [ts] Property 'map' does not exist on type 'Observable<Object>'.

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

8
répondu Nitin Bhargava 2018-06-01 12:51:13

il semble que le dernier RxJS exige le dactylogramme 1.8 donc le dactylogramme 1.7 signale l'erreur ci-dessus.

j'ai résolu ce problème en passant à la dernière version dactylographiée.

7
répondu roman 2016-04-30 23:21:25

des messages d'erreur similaires apparaîtront lors de la transition de la version 5 à la version 6. Voici une réponse au changement de rxjs-6.

Importer les opérateurs individuels, puis utiliser pipe au lieu d'enchaîner.

import { map, delay, catchError } from 'rxjs/operators'; 

source.pipe(
  map(x => x + x),
  delay(4000),
  catchError(err => of('error found')),
).subscribe(printResult);
5
répondu farrellw 2018-05-17 15:07:18

si je comprends bien c'est à cause de rxjs dernière mise à jour. Ils ont changé certains opérateurs et la syntaxe. Par la suite, nous devrions importer rx opérateurs comme ceci

import { map } from "rxjs/operators";

au lieu de

import 'rxjs/add/operator/map';

et nous avons besoin d'ajouter des tuyaux autour de tous les opérateurs comme celui-ci

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

Source: ici

5
répondu Gh111 2018-06-22 13:30:56

je faisais face à la même erreur. Il a été résolu quand j'ai fait ces trois choses:

  1. mise à Jour vers la dernière rxjs:

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

  1. carte d'Importation et de promettre:

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

  2. a ajouté une nouvelle déclaration d'importation:

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

4
répondu lokanath 2018-07-15 13:38:59

si vous utilisez angular4 l'utilisation ci-dessous importer. il devrait fonctionner .

importer "rxjs/ajouter/opérateur/de la carte";

si vous utilisez angular5 / 6 alors utiliser la carte avec la pipe et l'importation en dessous d'un

importer { carte } "rxjs/opérateurs";

3
répondu Manas 2018-07-11 10:36:54