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

Question

J'ai juste mis à niveau à partir Angulaire 2 beta16 à beta17, qui à son tour nécessite rxjs 5.0.0-bêta.6. (Changelog ici: https://github.com/angular/angular/blob/master/CHANGELOG.md#200-beta17-2016-04-28) Dans beta16 tout fonctionne bien concernant Observables/carte de la fonctionnalité. Les erreurs suivantes apparu après que j'ai mis à jour et se produire lorsque la machine tente de transpile:

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: Ambiante modules ne peuvent pas être imbriqués dans d'autres modules ou les 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 il ne résout pas le problème: Observables erreurs avec Angular2 bêta.12 et RxJs 5 beta.3

Mon appBoot.ts ressemble à ça (je suis déjà référencement 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 at-il une idée de ce que va détraquer?

Answer 1

Vous devez importer l'opérateur map :

 import 'rxjs/add/operator/map'
 

Answer 2

J'ai mis à jour mon gulp-tapuscrit plugin pour la version la plus récente (2.13.0) et maintenant, il se compile sans problème.

Mise à JOUR 1: j'étais auparavant à l'aide de gulp-tapuscrit version version 2.12.0

Mise à JOUR 2: Si vous mettez à niveau à l'angle de la version 2.0.0-rc.1, vous devez effectuer les opérations suivantes dans votre appBoot.ts fichier:

///<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, c'est la référence à es6-shim/index.d.ts

Cela suppose que vous avez installé l'es6-shim typings comme illustré ici:

Plus sur le typings installer à partir Angulaire ici: https://angular.io/docs/ts/latest/guide/typescript-configuration.html#!#typings

Answer 3

Rxjs 5.5 "La propriété" carte "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.

Answer 4

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 de 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';
 

Answer 5

Si vous voyez cette erreur dans VS2015, un problème de github et une solution de contournement sont mentionnés 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 d'avoir la version dactylographiée au-dessus de 1.8.2