web-dev-qa-db-fra.com

Angular 2 Le service Http n'exposant pas map () et d'autres fonctions RxJS

Est-ce que quelqu'un sait s'il y a eu des changements radicaux dans le http entre alpha 45 et alpha 48? J'ai fait des recherches et je n'ai rien trouvé. Mon problème est que le code ci-dessous fonctionnait parfaitement sur Alpha 45. Mais maintenant que je suis passé à Alpha 48, un message d'erreur _this.http.post(...).map is not a function s'affiche lorsque je tente d'exécuter l'application. La chose étrange est que IntelliSense montre que http.post renvoie un observable. Ce qui signifie que la fonction de carte devrait être disponible. Toute aide serait appréciée. Merci!

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 () => { };
    });
}
typescriptangularrxjs
13
Zorthgo

Si vous souhaitez utiliser les versions bêta de Angular 2 ou les futures versions de production réelles, vous devez effectuer deux opérations pour que cela fonctionne.

1) Vous devez d’abord mettre à jour votre configuration System.config () dans index.html pour inclure des références à RxJS:

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) Vous pouvez ensuite importer map() et d’autres (ou tous) opérateurs RxJS dans votre application avec des lignes import dans votre fichier principal (app.ts dans mon cas):

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

Si vous importez plutôt simplement map() pour réduire la taille, procédez comme suit:

import 'rxjs/add/operator/map';

Vous n'avez pas besoin de les importer dans chaque fichier de classe. Importez-les simplement dans votre fichier principal pour les rendre accessibles à tous vos autres composants/services/directives.

14
Michael Oryl

Vous devez importer l'opérateur de carte Rx dans votre composant, comme

import 'rxjs/add/operator/map';

À votre santé!

5
dheeran

Contrairement à ce qui est écrit ci-dessus, j’ai trouvé que je devais utiliser

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

Le node_modulesdefaultExtension était la pensée critique pour moi (je ne sais pas pourquoi le chemin rxjs/* n'ajoute pas le .js mais bon ho.)

Cela fonctionne du 48 au 52 dernier.

0
Fergus Gallagher

J'avais ce problème et il s'est avéré que c'était un problème avec la version de rxjs - angular 2.0.0-rc4 requiert rxjs-5.0.0-beta.6, j'avais la version beta.10 dans ma configuration jspm!

0
Graham King