Angular 2 beta.17: Die Eigenschaft 'map' ist für den Typ 'Observable <Response>' nicht vorhanden.

195

Ich habe gerade ein Upgrade von Angular 2 Beta16 auf Beta17 durchgeführt , was wiederum RXJS 5.0.0-Beta.6 erfordert. (Änderungsprotokoll hier: https://github.com/angular/angular/blob/master/CHANGELOG.md#200-beta17-2016-04-28 ) In der Beta16 funktionierte alles in Bezug auf die Observable / Map-Funktionalität gut. Die folgenden Fehler sind nach dem Upgrade aufgetreten und treten auf, wenn Typoskript versucht, sie zu transpilieren:

  1. Die Eigenschaft 'map' existiert nicht für den Typ 'Observable' (überall dort, wo ich eine Karte mit einem Observable verwendet habe).
  2. c: /path/node_modules/rxjs/add/operator/map.d.ts (2,16): Fehler TS2435: Umgebungsmodule können nicht in anderen Modulen oder Namespaces verschachtelt werden.
  3. c: /path/node_modules/rxjs/add/operator/map.d.ts (2,16): Fehler TS2436: Die Umgebungsmoduldeklaration kann keinen relativen Modulnamen angeben.

Ich habe diese Frage / Antwort gesehen, aber sie löst das Problem nicht: Beobachtbare Fehler mit Angular2 Beta.12 und RxJs 5 Beta.3

Meine appBoot.ts sieht so aus (ich verweise bereits auf 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
]);

Hat jemand eine Ahnung, was drunter und drüber geht?

brando
quelle

Antworten:

284

Sie müssen den mapOperator importieren :

import 'rxjs/add/operator/map'
0x1ad2
quelle
3
Das Angular-Team und das RxJS-Team empfehlen diesen Ansatz NICHT, den gesamten RX so zu importieren. Das solltest du nicht tun. Es ist zu groß. Die erste Antwort oben ist in Ordnung, aber die zweite nicht so sehr. @ 0x1ad2 Kannst du deine Antwort aktualisieren, um diesen massiven Import nicht als zweite Option einzuschließen?
Frosty
2
Dies ist nicht intuitiv. Wo ist dies als Abhängigkeit von der Implementierung von Observable in einer Angular 2+ -Entwicklung dokumentiert?
Joe
Gilt dies für ionic 3.20.0? Ich habe das gleiche Problem, weil ionic die Karte nicht automatisch importiert hat. Das explizite Importieren funktioniert, aber ich bin mir nicht sicher, ob dies korrekt ist.
LordDraagon
1
Dies behebt das Problem nicht für viele. Ich musste Pipe verwenden, um anstelle von rxjs / add / operator / map den Import von rxjs / operator mit pipe und .pipe zu verwenden. (map (res => res.json ()));
CodefreaK
Ich bin nach einigen Google-Suchen in einer Zeit hierher gekommen, in der wir jetzt Angular 7 verwenden und RXJS einige Änderungen vorgenommen hat. Die neue Methode ist import { map } from 'rxjs/operators', aber eine andere Antwort hat mehr Details.
Colby Hunter
78

Ich habe mein gulp-typescript-Plugin auf die neueste Version (2.13.0) aktualisiert und jetzt wird es problemlos kompiliert.

UPDATE 1: Ich habe zuvor gulp-typescript Version 2.12.0 verwendet

UPDATE 2: Wenn Sie ein Upgrade auf Angular 2.0.0-rc.1 durchführen, müssen Sie in Ihrer appBoot.ts-Datei Folgendes tun:

///<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
]);

Wichtig ist der Verweis auf es6-shim / index.d.ts

Dies setzt voraus, dass Sie die es6-shim-Typisierungen wie hier gezeigt installiert haben: Geben Sie hier die Bildbeschreibung ein

Weitere Informationen zu den von Angular installierten Typisierungen finden Sie hier: https://angular.io/docs/ts/latest/guide/typescript-configuration.html#!#typings

brando
quelle
Können Sie bitte die alte Versionsnummer erwähnen, bei der das Problem aufgetreten ist? Vielen Dank.
Meligy
1
@Meligy Ich war zuvor mit gulp-typescript Version 2.12.0
brando
1
Genial. Ich habe meinen Artikel über die Fehlermeldung aktualisiert undmap einen Hinweis für Benutzer mit ähnlichen Problemen hinzugefügt. Vielen Dank :)
Meligy
1
@Meligy Ich hatte das gleiche Problem erneut, als ich auf den Angular2 RC aktualisiert habe. Ich habe meine Antwort oben aktualisiert, um zu zeigen, wie ich sie gelöst habe.
Brando
6
import 'rxjs/Rx'; // Lädt alle Funktionen
VahidN
67

Rxjs 5.5 "Eigenschaft 'map' existiert nicht für den Typ Observable.

Das Problem hing mit der Tatsache zusammen, dass Sie Pipe um alle Operatoren hinzufügen müssen.

Ändere das,

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

dazu

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

Und

Karte wie folgt importieren,

import { map } from 'rxjs/operators';

Es wird Ihre Probleme lösen.

Hiran DA Walawage
quelle
3
Dies gilt auch für Rxjs 6. Jedes Tutorial, das ich mir ansehe, hat die Map-Funktion ohne Pipe. Dies funktionierte bei mir nicht, bis ich Pipe hinzufügte und die Karte von 'rxjs / operator' genau so importierte, wie es in der Antwort angegeben ist.
Keyvan Sadralodabai
Ja, dies gilt auch für Rxjs 6.
Hiran DA Walawage
41

In meinem Fall würde es nicht ausreichen, nur Karte und Versprechen aufzunehmen:

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

Ich habe dieses Problem gelöst, indem ich mehrere rxjs-Komponenten importiert habe, wie in der offiziellen Dokumentation empfohlen:

1) Importieren Sie Anweisungen in eine Datei app / rxjs-operator.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) Importieren Sie den rxjs-Operator selbst in Ihren Dienst:

// Add the RxJS Observable operators we need in this app.
import './rxjs-operators';
Alex Valchuk
quelle
Wiederum hat die beste Antwort auf die Frage nicht die meisten Stimmen. Dies ist die beste Antwort auf diese Frage. Ich danke Ihnen für das Teilen. Ich wünschte, andere würden darüber abstimmen.
frostig
26

Wenn dieser Fehler in VS2015 auftritt, wird hier ein Github-Problem und eine Problemumgehung erwähnt:

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

Dies hat mir geholfen, das property map does not exist on observableProblem zu beheben . Stellen Sie außerdem sicher, dass Sie eine Typoskriptversion über 1.8.2 haben

Abu Abdullah
quelle
8
Das Ersetzen C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\CommonExtensions\Microsoft\TypeScript\typescriptServices.js durch typescriptService funktionierte für VS 15. ( Neustart vs nach dem Ersetzen der Datei )
tchelidze
Das Ersetzen der oben genannten Datei funktionierte auch für mich
Krishnan
Immer noch kein Update von Microsoft ... Warum reparieren sie es nicht?
Piotrek
26

DIE ENDGÜLTIGE ANTWORT FÜR DIE, DIE ANGULAR 6 VERWENDEN:

Fügen Sie den folgenden Befehl in Ihre * .service.ts- Datei ein "

import { map } from "rxjs/operators";

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

Ich benutze Windows 10;

angle6 mit Typoskript V 2.3.4.0

Smit Patel
quelle
Sieht so aus, als könnten wir es nicht mehr nur in die Datei app.module.ts importieren. Jetzt müssen wir es in jeden Dienst und jede Komponente importieren
Adam Mendoza
15
import 'rxjs/add/operator/map';

&

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

arbeitete für mich

Justin Lange
quelle
13

In Angular 2x

In example.component.ts

import { Observable } from 'rxjs';

In example.component.html

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

In Angular 5x oder Angular 6x:

In example.component.ts

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

In example.component.html

valorAsync = interval(2500).pipe(map(valor => 'Async value'));
Eduardo Cordeiro
quelle
1
Warum müssen wir Pipe anstelle von Map direkt verwenden?
Krish
10

UPDATE 29. September 2016 für Angular 2.0 Final & VS 2015

Die Problemumgehung wird nicht mehr benötigt. Um dies zu beheben, müssen Sie lediglich TypeScript Version 2.0.3 installieren .

Korrektur aus der Bearbeitung dieses Github-Problemkommentars .

Jason
quelle
3
Ich habe dieses Problem, ich habe auch 2.0.3 installiert: /
Mild Fuzz
1
Ich habe TS 2.1.6, sehe aber immer noch das Problem
alltej
Zum Zeitpunkt dieses Kommentars ist TS spätestens 2.5.2. Diese Version bricht für mich. Die Verwendung von 2.3.x funktioniert.
PigBoT
10

Soweit ich weiß, liegt es am rxjsletzten Update. Sie haben einige Operatoren und Syntax geändert. Danach sollten wir solche rxOperatoren importieren

import { map } from "rxjs/operators";

an Stelle von

import 'rxjs/add/operator/map';

Und wir müssen Pipe um alle Operatoren wie diesen hinzufügen

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

Quelle ist hier

Gh111
quelle
9

Wie Justin Scofield in seiner Antwort vorgeschlagen hat, reicht es für die neueste Version von Angular 5 und für Angular 6 am 1. Juni 2018 einfach import 'rxjs/add/operator/map';nicht aus, den TS-Fehler zu beseitigen: [ts] Property 'map' does not exist on type 'Observable<Object>'.

Führen Sie den folgenden Befehl aus, um die erforderlichen Abhängigkeiten zu installieren: npm install rxjs@6 rxjs-compat@6 --saveDanach wird der mapImportabhängigkeitsfehler behoben!

Nitin Bhargava
quelle
1
Sieht nach mehr bahnbrechenden Änderungen aus, was besorgniserregend ist
Noobie3001
8

Ich war mit dem ähnlichen Fehler konfrontiert. Es wurde gelöst, als ich diese drei Dinge tat:

  1. Update auf die neuesten rxjs:

    npm install rxjs@6 rxjs-compat@6 --save
  2. Karte importieren und versprechen:

    import 'rxjs/add/operator/map';
    import 'rxjs/add/operator/toPromise';
  3. Neue Importanweisung hinzugefügt:

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

Es sieht so aus, als ob das neueste RxJS Typoskript 1.8 erfordert, sodass Typoskript 1.7 den obigen Fehler meldet.

Ich habe dieses Problem durch ein Upgrade auf die neueste Typoskriptversion gelöst.

römisch
quelle
Wenn Sie tscvon Befehl verwenden, überprüfen Sie bitte tsc -v;-) Die Verwendung von "Skripten" ist eine noch bessere Idee, siehe stackoverflow.com/a/37034227/478584
tomaszbak
6

Ähnliche Fehlermeldungen werden beim Übergang von Version 5 zu Version 6 angezeigt. Hier finden Sie eine Antwort auf die Änderung von rxjs-6.

Importieren Sie die einzelnen Operatoren und verwenden Sie sie pipeanstelle der Verkettung.

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

source.pipe(
  map(x => x + x),
  delay(4000),
  catchError(err => of('error found')),
).subscribe(printResult);
Farrellw
quelle
6

Wenn Sie angle4 verwenden, verwenden Sie den folgenden Import. es sollte funktionieren .

'rxjs / add / operator / map' importieren;

Wenn Sie angle5 / 6 verwenden, verwenden Sie map with pipe und importieren Sie unter eins

{map} von "rxjs / operator" importieren;

Manas
quelle
1

Die Eigenschaft 'map' existiert nicht für den Winkel 'Observable Response' des Typs 6

Lösung: Aktualisieren Sie die Angular CLI und die Core-Version

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 
Jaydeepsinh Makwana
quelle