web-dev-qa-db-fra.com

Angular 2 beta.17: La propriété 'map' n'existe pas sur le type 'Observable <Response>'

Je viens de passer de Angular 2 beta16 à beta17 , qui à son tour nécessite rxjs 5.0.0-beta.6. (Changelog here: https://github.com/angular/angular/blob/master/CHANGELOG.md#200-beta17-2016-04-28 ) En beta16, tout fonctionnait bien en ce qui concerne Observable/fonctionnalité de la carte. Les erreurs suivantes sont apparues après la mise à niveau et se produisent lorsque TypeScript tente de transpiler:

  1. La propriété 'carte' n'existe pas sur le type 'Observable' (n'importe où j'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: la déclaration du module Ambient ne peut pas spécifier un nom de 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.

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

///<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 a-t-il une idée de ce qui se passe mal?

typescriptangularrxjs
187
brando

J'ai mis à jour mon plugin gulp-TypeScript vers la dernière version (2.13.0) et maintenant, il se compile sans accroc.

UPDATE 1: J'utilisais précédemment gulp-TypeScript version 2.12.0

MISE À JOUR 2: Si vous effectuez une mise à niveau vers le Angular 2.0.0-rc.1, vous devez procéder comme suit dans votre fichier appBoot.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 avez installé les typings es6-shim comme indiqué ici: enter image description here

Pour plus d’informations sur l’installation des types à partir de Angular, cliquez ici: https://angular.io/docs/ts/latest/guide/TypeScript-configuration.html#!#typings

78
brando

Vous devez importer l'opérateur map:

import 'rxjs/add/operator/map'
285
0x1ad2

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

Le problème était lié au fait que vous deviez ajouter un tuyau à tous les opérateurs.

Change ça,

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

pour ça

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

Et

Importer la carte comme ça,

import { map } from 'rxjs/operators';

Cela résoudra vos problèmes.

66
Hiran D.A Walawage

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 en tant que documentation officielle recommande:

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';
41
Alex Valchuk

Si vous voyez cette erreur dans VS2015, il existe un problème de 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 property map does not exist on observable. De plus, assurez-vous que la version TypeScript est supérieure à 1.8.2.

26
Abu Abdullah

LA RÉPONSE FINALE DE CEUX QUI UTILISE ANGULAR 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

25
Smit Patel
import 'rxjs/add/operator/map';

Et

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

a travaillé pour moi

14
Justin Scofield

Dans Angular 2x

Dans example.component.ts

import { Observable } from 'rxjs';

Dans example.component.html

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

Dans 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'));
12
Eduardo Cordeiro

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

La solution de contournement n’est plus nécessaire. Pour vous corriger, il vous suffit de installer TypeScript version 2.0. .

Correction prise du montage sur ce commentaire de github .

10
Jason

Si j'ai bien compris, c'est à cause de rxjs dernière mise à jour. Ils ont changé certains opérateurs et syntaxe. Ensuite, nous devrions importer rx opérateurs comme celui-ci

import { map } from "rxjs/operators";

au lieu de cela

import 'rxjs/add/operator/map';

Et nous devons ajouter un tuyau autour de tous les opérateurs comme celui-ci

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

La source est ici

9
Gh111

Comme Justin Scofield l'a suggéré dans sa réponse, pour la dernière version de Angular 5 et pour Angular 6, à compter du 1er juin 2018, import 'rxjs/add/operator/map'; ne suffit pas pour le 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 requises: npm install rxjs@6 rxjs-compat@6 --save après quoi l'erreur map import dependency est résolue!

8
Nitin Bhargava

Il semble que la dernière version de RxJS nécessite TypeScript 1.8. TypeScript 1.7 rapporte l'erreur ci-dessus.

J'ai résolu ce problème en effectuant une mise à niveau vers la dernière version de TypeScript.

7
roman

Je faisais face à la même erreur. C'était résolu quand j'ai fait ces trois choses:

  1. Mise à jour vers les derniers rxjs:

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

  2. Carte d'importation et promesse:

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

  3. Ajout d'une nouvelle déclaration d'importation:

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

Des messages d'erreur similaires apparaîtront lors de la transition de la version 5 à la version 6. Voici la réponse à apporter au changement en 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);
6
farrellw

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

import 'rxjs/add/operator/map';

Si vous utilisez angular5/6, utilisez map avec pipe et importez en dessous d’un.

import {map} de "rxjs/operators";

5
Manas

la propriété 'carte' n'existe pas sur le type 'réponse observable' angular 6

Solution: Mise à jour Angular CLI et version de base

ng update @angular/cli           //Update Angular CLi 
ng update @angular/core          //Update Angular Core 
npm install --save rxjs-compat   //For Map Call For Post Method
0
Jaydeepsinh Makwana