Il servizio Http di Angular 2 non espone map () e altre funzioni RxJS

Qualcuno sa se sono state apportate modifiche irrisolte al http tra alpha 45 e alpha 48? Ho cercato in giro e non ho trovato nulla. Il mio problema è che il codice sotto funzionava perfettamente su Alpha 45. Ma ora che ho aggiornato a Alpha 48 sto ottenendo una _this.http.post(...).map is not a function messaggio di errore di _this.http.post(...).map is not a function quando provo a eseguire l’applicazione. La cosa strana è che IntelliSense mostra che http.post restituisce un osservabile. Ciò significa che la funzione mappa dovrebbe essere disponibile. Qualsiasi aiuto sarebbe apprezzato. Grazie!

 public Authenticate(username: string, password: string): Observable { this.ResetAuthenticationValues(); return Observable.create((subscriber: EventEmitter) => { 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 () => { }; }); } 

Un altro aggiornamento (tosse, mi dispiace, ho dimenticato questa opzione)

Se si desidera evitare di aggiungere singolarmente gli operatori è ansible importare l’Rx completo facendo

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

Avrai tutti gli operatori 🙂

Aggiorna alpha 50 (08/12/2015)

Poco dopo la pubblicazione di alpha 49, rilasciarono alpha 50. Questa versione aggiornava rxjs in alpha 14. Quindi farai bene a fare

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

Aggiorna alpha 49 (08/12/2015)

A partire da ora è stato rilasciato alfa 49 e questo non è cambiato, il che significa che rimarrà nel tempo. La risposta originale è ancora valida con alcune modifiche, i percorsi modificati per rjxs, quindi dovrebbe essere il seguente:

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

Nota

Questa versione richiede esattamente la versione alpha 13 , quindi se nel tuo package.json hai già un’altra versione, dovrai rimuoverla, installare angular2 e quindi installare rjxs.

Aggiornare

Il CHANGELOG è stato aggiornato per mostrare questo cambio di rottura. C’è un commento da @jeffbcross nel numero # 5642 che chiarisce molto in questa faccenda.

Citando parte di quel commento

La modularità era un objective del nuovo progetto RxJS fin dall’inizio, e non è stato fino a poco tempo fa che abbiamo iniziato seriamente a prendere sul serio la composizione degli operatori invece di affidarci a distribuzioni su livelli di Rx.

Risposta originale

C’era in realtà un cambio di rottura per RxJS e Angular2. Quindi ora per usare operatori come la map devi importarli separatamente. Puoi vedere il cambiamento in questa richiesta di pull . E c’è già un problema riguardo alla tua domanda.

Vi consiglio di attenervi a alpha 47. Ma a tutti coloro che hanno bisogno e vogliono sapere qual è la soluzione, come specificato nella richiesta pull, aggiungere l’operatore separatamente.

Devi avere qualcosa di simile

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

Per risolvere il problema, aggiungi l’operatore (scusami se lo ripeti tante volte) e configura i percorsi su rxjs

Nota

Questo deve essere fatto con RxJS alpha 11, o alpha 12 ( non confonderlo con @reactivex/rxjs , ora è solo rxjs ). Quindi installalo con

 npm install [email protected] 

O semplicemente npm install rxjs se vuoi l’ultimo, anche se lo bloccano per essere alpha 11.

Configura i percorsi nel tuo System.config (nota che questa è la mia configurazione, non necessariamente la migliore e sto assumendo che tu abbia installato alpha 11)

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

Dopo aver terminato la configurazione, è ansible importare l’operatore come segue

  import 'rxjs/operators/map'; 

E questo è tutto. Dovrai farlo con ogni operatore. Quindi ripeto, ti consiglio di attenersi ad alpha 47, come ti ho detto nel commento. Cercherò di aggiornare la risposta più tardi con un plnkr.

Se vuoi utilizzare le versioni Beta di Angular 2 o le future versioni di produzione reali, devi fare due cose per farlo funzionare.

1) Per prima cosa devi aggiornare la configurazione System.config () in index.html per includere i riferimenti a 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) Quindi puoi importare map() e altri (o tutti) operatori RxJS nella tua applicazione con import linee di import nel tuo file principale (app.ts nel mio caso):

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

Se preferisci importare solo map() per mantenere la dimensione bassa, lo faresti invece:

 import 'rxjs/add/operator/map'; 

Non è necessario importarli in ogni file di class. Basta importarli nel tuo file principale per renderli accessibili a tutti gli altri tuoi componenti / servizi / direttive.

Devi importare l’operatore di mappa Rx nel tuo componente come

 import 'rxjs/add/operator/map'; 

Saluti!

In contrasto con ciò che è scritto sopra, ho scoperto che dovevo usare

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

Il node_modules defaultExtension era il pensiero critico per me (non so perché il percorso rxjs/* non aggiunga il .js ma hey ho.)

Funziona dal 48 al più recente 52.

Ho avuto questo problema e si è rivelato un problema con la versione di rxjs – angular 2.0.0-rc4 richiede rxjs-5.0.0-beta.6, avevo beta.10 nella mia configurazione jspm!