How to load RxJS (and zone.js / reflect-metadata) with Angular 2 (beta and newer)?

javascript angular rxjs systemjs

11,787

So it turns out that the problem was fixed easily by changing the SystemJS config to the following in my index.html 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');

I had actually tried that, but what I failed to realize was that zone.js and reflect-metadata were also no longer included in Angular 2, and I was running into that problem as well.

For those interested, I got around the lack of zone.js and reflect-metadata most easily by including the angular2-polyfills.js file in my index.html:

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

Now my app works just as it did with Alpha 53.

11,787

Michael Oryl

I'm the Director of Web Development for a life insurance company. In my previous life I was the founder and editor-in-chief of MobileBurn.com. For work I focus mostly on JavaScript projects using Node.js, Angular, and Node. I also dabble in iOS/Swift when needed, though I claim no proficiency there. I used to spend a lot of time with Java/Groovy, but I don't work in that space any longer. For fun, I like working on Arduino and similar micro-controllers for robotics projects as well as generic "maker" stuff. #SOreadytohelp

Updated on June 04, 2022

Comments

Michael Oryl almost 2 years

As of Angular 2 Alpha 54 (changelog), RxJS is no longer included in Angular 2.

Update: Turns out that zone.js and reflect-metadata are also excluded.

As a result, I now get the following errors (as seen in the Chrome dev console):

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)

I have RxJS in my package.json file (^5.0.0-beta.0), and it has been installed with npm, but the issue is I just am not familiar enough with SystemJS at this time to get things running. Here's the body section from my index.html file:

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

I have been playing around with other configurations, but none have gotten me all the way there. My guess is that this is relatively simple, it's just my lack of understanding or the way the tools get used that is stopping me.

Here's my app.ts file that is the app/app referred to in the SystemJS config:

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

I'm serving the app with a livereload Express server that uses static mappings so that calls like http://localhost:3000/node_modules/rxjs/Rx.js are able to get the needed file even though index.html is served from /src as the root of the server and node_modules is actually at the same level as src and not inside it.

Any help would, as always, be appreciated.

Gui vieira over 8 years

Awesome answer. Just noticed that the correct polyfills link is <script src="../node_modules/angular2/bundles/angular2-polyfills.js"‌></script>
Michael Oryl over 8 years

Thanks for fixing that.
robwormald over 8 years

Note that if you're using the bundles, there is a similar Rx.js bundle in the node_modules/rxjs/bundles directory that avoids having to do any configuration.