web-dev-qa-db-de.com

Angular Der HTTP-Dienst von 2 legt map () und andere RxJS-Funktionen nicht offen

Weiß jemand, ob das HTTP zwischen Alpha 45 und Alpha 48 geändert wurde? Ich habe herumgesucht und nichts gefunden. Mein Problem ist, dass der folgende Code perfekt auf Alpha 45 funktionierte. Nachdem ich nun auf Alpha 48 aufgerüstet habe, erhalte ich eine _this.http.post(...).map is not a function-Fehlermeldung, wenn ich versuche, die Anwendung auszuführen. Das Merkwürdige ist, dass IntelliSense zeigt, dass http.post ein Observable zurückgibt. Was bedeutet, dass die Kartenfunktion verfügbar sein sollte. Jede Hilfe wäre dankbar. Vielen Dank!

public Authenticate(username: string, password: string): Observable<boolean> {

    this.ResetAuthenticationValues();

    return Observable.create((subscriber: EventEmitter<string>) => { 

        let body: string = 'grant_type=password&username=' + username + '&password=' + password;
        let headers = new Headers();
        headers.append('Content-Type', 'application/x-www-form-urlencoded');

        this.http.post('http://example.com', body, {headers: headers})
            .map(res => res.json())
            .subscribe(
                (data: DataResponse) => {
                    if (!data.error) {
                        this.accessToken = {access_token: data.access_token, token_type: data.token_type};
                        subscriber.next(this.isAuthenticated = true);                       
                    }
                    else
                        subscriber.error(this.isAuthenticated = false);
                },
                (err) => subscriber.error(err),
                () => subscriber.complete()
            );

        return () => { };
    });
} 
13
Zorthgo

Noch ein Update (Entschuldigung, habe diese Option vergessen)

Wenn Sie vermeiden möchten, die Operatoren einzeln hinzuzufügen, können Sie den vollständigen Rx importieren

import {Observable, Subject, ReplaySubject, etc...} from 'rxjs/Rx';

Du wirst alle Operatoren haben :)

Update Alpha 50 (12.08.2015)

Kurz nach der Veröffentlichung von alpha 49 wurde alpha 50 veröffentlicht. Diese Version hat rxjs auf alpha 14 aktualisiert

npm install [email protected]
npm install [email protected]

Update Alpha 49 (12.08.2015)

Ab sofort wurde alpha 49 veröffentlicht und dies hat sich nicht geändert, was bedeutet, dass dies in der Zeit bleiben wird. Die ursprüngliche Antwort ist mit ein paar Änderungen noch gültig, die Pfade für rjxs wurden geändert, daher sollte sie wie folgt lauten:

System.config({
    paths: {
        'rxjs/add/observable/*' : 'node_modules/rxjs/add/observable/*.js',
        'rxjs/add/operator/*' : 'node_modules/rxjs/add/operator/*.js',
        'rxjs/*' : 'node_modules/rxjs/*.js'
    }
});

import 'rxjs/add/operator/map';

Hinweis

Diese Version benötigt genau das alpha 13 Version, also wenn in Ihrem package.json Wenn Sie bereits eine andere Version haben, müssen Sie diese entfernen, angle2 installieren und dann rjxs installieren.

Update

Das CHANGELOG wurde aktualisiert, um diese Änderung anzuzeigen. Es gibt ein Kommentar von @jeffbcross in Ausgabe # 5642 , das eine Menge in dieser Angelegenheit verdeutlicht.

Zitiert einen Teil dieses Kommentars

Modularität war von Anfang an ein Ziel des neuen RxJS-Projekts, und es war bis vor kurzem nicht so, dass wir uns ernsthaft mit dem Komponieren von Operatoren befassten, anstatt uns auf abgestufte Verteilungen von Rx zu verlassen.

Ursprüngliche Antwort

In Bezug auf RxJS und Angular2 gab es eine grundlegende Änderung. Um nun Operatoren wie map zu verwenden, müssen Sie diese separat importieren. Sie können die Änderung in diesem Pull-Anforderung sehen. Und es gibt bereits ein Problem zu Ihrer Frage.

Ich empfehle Ihnen, sich an alpha 47 zu halten. Aber für alle, die wissen müssen und wollen, wie die Lösung laut Pull-Request lautet, muss der Operator separat hinzugefügt werden.

Sie müssen so etwas haben

import {Http, ...} ...;

// Component
constructor(http: Http) {
    http.get(...).map() // 'map' doesn't exist! Ouch!
}

Um das Problem zu beheben, fügen Sie den Operator hinzu (es tut uns leid, dass Sie ihn so oft wiederholt haben) und konfigurieren Sie die Pfade zu rxjs

Hinweis

Dies muss mit RxJS alpha 11 oder alpha 12 geschehen ( nicht verwechseln mit @reactivex/rxjs, jetzt ist es nur rxjs). Also installiere es mit

npm install [email protected]

Oder nur npm install rxjs wenn Sie das Neueste wollen, obwohl sie sperren Sie es Alpha 11 sein.

Konfigurieren Sie die Pfade in Ihrer System.config (beachten Sie, dass dies nicht unbedingt die beste Konfiguration ist und ich davon ausgehe, dass Sie Alpha 11 installiert haben)

System.config({
    paths: {
        'rxjs/observable/*' : 'node_modules/rxjs/observable/*.js',
        'rxjs/operators/*' : 'node_modules/rxjs/operators/*.js',
        'rxjs/*' : 'node_modules/rxjs/*.js'
    }
});

Nachdem Sie mit der Konfiguration fertig sind, können Sie den Operator wie folgt importieren

 import 'rxjs/operators/map';

Und das ist alles. Das müssen Sie bei jedem Bediener tun. Also wiederhole ich, ich empfehle dir, bei Alpha 47 zu bleiben, wie ich dir im Kommentar gesagt habe. Ich werde versuchen, die Antwort später mit einem plnkr zu aktualisieren.

31
Eric Martinez

Wenn Sie die Beta-Versionen von Angular 2 oder die zukünftigen realen Produktionsversionen verwenden möchten, müssen Sie zwei Dinge tun, damit dies funktioniert.

1) Sie müssen zuerst Ihre System.config () - Konfiguration in index.html aktualisieren, um Verweise auf RxJS aufzunehmen:

System.config({
    map: {
        'rxjs': 'node_modules/rxjs'
    },
    packages: {
        'app': {defaultExtension: 'js'}, // assumes your code sites in `src/app`
        'rxjs': {defaultExtension: 'js'}
    }
});
System.import('app/app'); // this assumes your main file is `app.ts` and it sits in the `app` folder.

2) Dann können Sie map() und andere (oder alle) RxJS-Operatoren mit import -Zeilen in Ihrer Hauptdatei (app.ts in meinem Fall) in Ihre Anwendung importieren:

import 'rxjs/Rx'; // this would import all RxJS operators

Wenn Sie lieber nur map() importieren, um die Größe zu verringern, würden Sie dies stattdessen tun:

import 'rxjs/add/operator/map';

Sie müssen nicht diese in jede Klassendatei importieren. Importieren Sie sie einfach in Ihre Hauptdatei, um sie allen anderen Komponenten/Diensten/Richtlinien zugänglich zu machen.

14
Michael Oryl

Sie müssen den Rx-Kartenoperator in Ihre Komponente importieren

import 'rxjs/add/operator/map';

Prost!

5
dheeran

Im Gegensatz zu dem, was oben geschrieben wurde, musste ich es verwenden

    System.config({
        packages: {
            'app': {defaultExtension: 'js'},
            'node_modules': {defaultExtension: 'js'}
        },
        paths: {
            'rxjs/*' : 'node_modules/rxjs/*.js'
        }
    });

Die node_modulesdefaultExtension war für mich der kritische Gedanke (ich weiß nicht, warum der rxjs/*-Pfad nicht den .js hinzufügt, aber hey ho.)

Dies funktioniert von 48 bis 52.

0

Ich hatte dieses Problem und es stellte sich als Problem mit der Version von rxjs heraus - Winkel 2.0.0-rc4 erfordert rxjs-5.0.0-beta.6, ich hatte beta.10 in meiner jspm-config!

0
Graham King