Menu
I'm unable to get a minimal Angular 2 application using RxJS off the ground. I'm using Typescript (tsc 1.6.2) and systemjs for module loading. How do I get systemjs to load the Rx module correctly? I've run out of ideas to try and I'd appreciate any pointer to what I'm doing wrong. Module loading is a bit of magic to me. Very frustrating.
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<script src="../node_modules/es6-shim/es6-shim.js"></script>
<script src="../node_modules/systemjs/dist/system.src.js"></script>
<script src="../node_modules/rx/dist/rx.lite.js"></script>
<script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
</head>
<body>
<app>App loading...</app>
<script>
System.config({
packages: { 'app': { defaultExtension: 'js' } }
});
System.import('app/app');
</script>
</body>
</html>
app.ts:
/// <reference path="../../node_modules/rx/ts/rx.all.d.ts" />
import { bootstrap, Component, View } from 'angular2/angular2';
import * as Rx from 'rx';
@Component({
selector: 'app'
})
@View({
template: `Rx Test`
})
export class App {
subject: Rx.Subject<any> = new Rx.Subject<any>();
}
bootstrap(App);
SystemJS attempts to load a file that does not exist:
As soon as I comment out the subject in the code above, everything runs fine as there'll be no attempt to load the non-existent file (and no rx is loaded).
450
Angular2 is no longer bundling RxJS within Angular2 itself. Now you must import the operators individually. This was an important breaking change which I answered here. So please refer to that answer since this one is obsolete and no longer applies.
Update 12/11/2015
Alpha46 is using RxJS alpha 0.0.7 (soon to be 0.0.8). Since this ng2 alpha version you need no more the solution below, you can now import Observable, Subject among others directly from angular2/angular, so the original answer can be discarded
import {Observable, Subject} from 'angular2/angular2';
=====================================
Angular2 is not longer using the old RxJS, they moved to the new RxJS 5 (aka RxJS Next) so it will collide with Http and EventEmitter.
So first remove the import and the script to rx.lite.js.
Instead you have to do (you need no scripts nor mapping in your config)
Edit
This line is to make it work in a plnkr, but in my projects I just have to add something else
Plnkr version
import Subject from '@reactivex/rxjs/dist/cjs/Subject';
Offline version
import * as Subject from '@reactivex/rxjs/dist/cjs/Subject';
Note about offline version
If you try the first approach for plnkr in your local projects you'll probably get this message error
TypeError: Subject_1.default is not a function
So for your local (offline) version you should use the second approach (with the asterisk).
Note
There's no bracket in Subject and that's explained in this conversation (I had the same problem, lol)
Here's a plnkr not failing.
I hope it helps. If I missed something just tell me ;)
182
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
