2015-12-16 12 views
11

A partire dal Angolare 2 Alpha 54 (changelog), RxJS non è più incluso nel angolare 2.Come caricare RxJS (e zone.js/riflettere-metadati) con angolare 2 (beta e successivi)

Aggiornamento : Risulta che anche zone.js e reflect-metadata sono esclusi.

Di conseguenza, io ora ottenere i seguenti errori (come si vede nella console dev Chrome):

system.src.js:4681 GET http://localhost:3000/rxjs/Subject 404 (Not Found)F @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681 
system.src.js:4681 GET http://localhost:3000/rxjs/observable/fromPromise 404 (Not Found)F @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681 
localhost/:1 Uncaught (in promise) Error: XHR error (404 Not Found) loading http://localhost:3000/rxjs/Subject(…)t @ system.src.js:4681g @ system.src.js:4681(anonymous function) @ system.src.js:4681 
system.src.js:4681 GET http://localhost:3000/rxjs/operator/toPromise 404 (Not Found)F @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681 
system.src.js:4681 GET http://localhost:3000/rxjs/Observable 404 (Not Found) 

ho RxJS nel mio file package.json (^ 5.0.0-beta.0), ed è stato installato con npm, ma il problema è che non ho abbastanza familiarità con SystemJS in questo momento per far funzionare le cose. Ecco la sezione del corpo dal mio file index.html:

<body> 
<app></app> <!-- my main Angular2 tag, which is defined in app/app as referenced below --> 

<script src="../node_modules/systemjs/dist/system.js"></script> 
<script src="../node_modules/typescript/lib/typescript.js"></script> 
<script src="../node_modules/angular2/bundles/angular2.dev.js"></script> 
<script src="../node_modules/angular2/bundles/http.dev.js"></script> 
<script> 
    System.config({ 
     packages: {'app': {defaultExtension: 'js'}} 
    }); 
    System.import('./app/app'); 
</script> 

<script src="http://localhost:35729/livereload.js"></script> 
</body> 

Ho giocato in giro con altre configurazioni, ma nessuno mi ha preso per tutto il tragitto. La mia ipotesi è che questo è relativamente semplice, è solo la mia mancanza di comprensione o il modo in cui gli strumenti si abituano a fermarmi.

Ecco il mio file app.ts che è il app/app di cui al config SystemJS:

import {Component} from 'angular2/core'; 
import {bootstrap} from 'angular2/platform/browser'; 
import {COMMON_DIRECTIVES} from 'angular2/common'; 

@Component({ 
    selector: 'app', 
    directives: [], 
    template: `<div>{{greeting}}, world!</div>` 
}) 
export class App { 
    greeting:string = 'Hello'; 
} 

bootstrap(App, [COMMON_DIRECTIVES]); 

sto servendo l'applicazione con un server di Express livereload che utilizza i mapping statici in modo che le chiamate come http://localhost:3000/node_modules/rxjs/Rx.js sono in grado per ottenere il file necessario anche se index.html viene servito da /src come root del server e node_modules è effettivamente allo stesso livello di src e non al suo interno.

Qualsiasi aiuto sarebbe, come sempre, apprezzato.

risposta

14

Così si scopre che il problema è stato risolto facilmente cambiando la configurazione SystemJS al seguente nel mio index.html di file:

System.config({ 
    map: { 
     rxjs: 'node_modules/rxjs' // added this map section 
    }, 
    packages: { 
     'app': {defaultExtension: 'js'}, 
     'rxjs': {defaultExtension: 'js'} // and added this to packages 
    } 
}); 
System.import('app/app'); 

realtà avevo provato, ma quello che non sono riuscito a capire era che zone.js e reflect-metadata non erano più inclusi in Angular 2 e anch'io mi stavo imbattendo in quel problema.

Per chi fosse interessato, ho avuto intorno alla mancanza di zone.js e reflect-metadata più facilmente includendo il file angular2-polyfills.js nel mio index.html:

<script src="../node_modules/angular2/bundles/angular2-polyfills.js"></script> 

Ora la mia applicazione funziona proprio come ha fatto con Alpha 53.

+0

Risposta stupenda. Appena notato che il link polyfills corretto è '' –

+0

Grazie per averlo corretto. –

+0

Si noti che se si utilizzano i pacchetti, esiste un pacchetto Rx.js simile nella directory node_modules/rxjs/bundles che evita di dover eseguire alcuna configurazione. – robwormald

Problemi correlati