2015-12-16 10 views
11

Ab Angular 2 Alpha 54 (changelog) laden, wird RxJS nicht mehr in Angular 2.Wie RxJS (und zone.js/reflektieren-Metadaten) mit kantigen 2 (Beta und neuen)

-Update : Es stellt sich heraus, dass zone.js und reflect-metadata ebenfalls ausgeschlossen sind.

Als Ergebnis erhalte ich nun die folgenden Fehler (wie in der Chrome-Entwickler-Konsole zu sehen):

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) 

ich RxJS in meiner package.json Datei (^ 5.0.0-beta.0), und es wurde mit npm installiert, aber das Problem ist, ich bin gerade nicht genug vertraut mit SystemJS zu dieser Zeit, um die Dinge laufen zu lassen. Hier ist der Körperabschnitt aus meiner index.html Datei:

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

Ich habe um mit anderen Konfigurationen gespielt, aber keine hat uns dort die ganzen Weg bekommen. Meine Vermutung ist, dass dies relativ einfach ist, nur mein mangelndes Verständnis oder die Art und Weise, wie die Werkzeuge verwendet werden, hält mich auf.

Hier ist meine app.ts Datei, die die app/app in der SystemJS Config bezeichnet ist:

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]); 

Ich diene die App mit einem livereload Express Server, der statische Zuordnungen verwendet, so dass Anrufe wie http://localhost:3000/node_modules/rxjs/Rx.js der Lage sind, um die benötigte Datei zu bekommen, obwohl index.html von /src als Wurzel des Servers bedient wird und node_modules ist eigentlich auf dem gleichen Niveau wie src und nicht drin.

Jede Hilfe würde, wie immer, geschätzt werden.

Antwort

14

So stellt sich heraus, dass das Problem einfach durch Änderung der SystemJS Config an folgende in meiner index.html Datei festgelegt wurde:

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

hatte ich versucht, tatsächlich das, aber was versäumt ich war zu erkennen, dass zone.js und reflect-metadata waren auch nicht mehr in Angular 2 enthalten, und ich stieß auch auf dieses Problem.

Für Interessenten, habe ich um den Mangel an zone.js und reflect-metadata am einfachsten durch die angular2-polyfills.js Datei in meinem index.html einschließlich:

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

Jetzt ist meine App funktioniert genauso wie es mit Alpha tat 53.

+0

Super Antwort. Gerade bemerkt, dass der korrekte Polyfill Link ist '' –

+0

Vielen Dank für die Reparatur. –

+0

Beachten Sie, dass bei Verwendung der Bundles ein ähnliches Rx.js-Bundle im Verzeichnis node_modules/rxjs/bundles vorhanden ist, bei dem keine Konfiguration erforderlich ist. – robwormald