2015-12-31 13 views
11

Sto avendo un problema con RxJS con angolare 2. La maggior parte dei metodi suggeriti dal file di definizione tipografico non sono definiti sul mio oggetto Observable come ...mancanti metodi osservabili RxJS 5.0.0-beta.0

enter image description here

enter image description here

poi ho capito, che i metodi non esiste sul prototipo osservabili.

enter image description here

Conosco un sacco di cose sono cambiate dalla versione 4 alla 5, in modo da fare sono perso qualcosa?

Browserify aggiunto per me ... enter image description here

risposta

17

Senza vedere il vostro attuale codice, non posso dirvi esattamente cosa aggiungere per risolverlo.

Ma il problema generale è questo: RxJS 5 non è incluso con angolare 2 più ora che è entrato nella fase Beta. Dovrai importare l'operatore o gli operatori desiderati o importarli tutti. Le dichiarazioni di importazione aspetto:

import 'rxjs/add/operator/map'; // imports just map 
import 'rxjs/add/operator/mergeMap'; // just mergeMap 
import 'rxjs/add/operator/switchMap'; // just switchMap 
import {delay} from 'rxjs/operator/delay'; // just delay 

O come

import 'rxjs/Rx'; // import everything 

Per determinare il percorso del modulo desiderato, guardare il source tree. Ogni importazione con add aggiungerà proprietà a Observable o Observable.prototype. Senza add, avresti bisogno di fare import {foo} from 'rxjs/path/to/foo'.

Sarà inoltre necessario assicurarsi che RxJS venga inserito correttamente nel progetto. Qualcosa del genere sarebbe andato nel file index.html:

System.config({ 
    map: { 
     'rxjs': 'node_modules/rxjs' // this tells the app where to find the above import statement code 
    }, 
    packages: { 
     'app': {defaultExtension: 'js'}, // if your app in the `app` folder 
     'rxjs': {defaultExtension: 'js'} 
    } 
}); 
System.import('app/app'); // main file is `app/app.ts` 

Se si utilizza Webpack to build the Angular 2 app like in this Github project (come ho fatto io), quindi non è necessario che System roba e le importazioni dovrebbero farlo.

+0

Ottimo Michael. –

9

Sì, in angolare 2.0 è necessario includere gli operatori/osservabili avete bisogno.

lo faccio come questo:

import 'rxjs/operator/map'; 
import 'rxjs/operator/delay'; 
import 'rxjs/operator/mergeMap'; 
import 'rxjs/operator/switchMap'; 
import 'rxjs/observable/interval'; 
import 'rxjs/observable/forkJoin'; 
import 'rxjs/observable/fromEvent'; 

Tuttavia, è anche necessario configurare questo System.js

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

Ecco il codice sta lavorando: https://github.com/thelgevold/angular-2-samples

1

Ho una configurazione JSPM nel mio progetto, in modo da aggiungere rxjs alla sezione percorso non è stato sufficiente.

JSPM aggiunto il seguente alla mia configurazione SystemJS (sezione della mappa):

"npm:[email protected]": { 
    "crypto": "github:jspm/[email protected]", 
    "es6-promise": "npm:[email protected]", 
    "es6-shim": "npm:[email protected]", 
    "process": "github:jspm/[email protected]", 
    "reflect-metadata": "npm:[email protected]", 
    "rxjs": "npm:[email protected]", 
    "zone.js": "npm:[email protected]" 
}, 

Quindi, se si utilizza JSPM assicurarsi di rimuovere la mappatura rxjs sopra, altrimenti alcuni file rxjs verranno caricati due volte, una volta via jspm_packages e una volta tramite node_modules.