Multiple Rx 404 errors in Angular2 component

Question

I have added a script reference to the RXjs library as well as including an import statement to the Rx root.

In my HTML:

<script src="libs/Rx.js"></script>
<script>
    System.config({
        map: {
            rxjs: '/libs/Rx' // added this map section
        },
        packages: {
            scripts: {
                defaultExtension: 'js'
            }
        }
    });
</script>

(I use Gulp to transfer the node_modules I need to a libs folder. This is something I needed to do to get Angular2 to work in Visual Studio 2015, as described in Starting Angular 2 in ASP.NET 5 with TypeScript using Visual Studio 2015.)

In my component:

import "rxjs/Rx";

I am getting these errors.

.../Rx/Observable 404 (Not Found)
.../Rx/Subject 404 (Not Found)
.../RX/operator/toPromise 404 (Not Found)
.../Rx/observable/PromiseObservable 404 (Not Found)
.../Rx/operators/map 404 (Not Found)

These were raised by system.src.js (line 4868). Why is Systemjs unable to find them? The Rx.js file has these defined.

Should I be including each of these explicitly in my component? Apart from "map", I don't use them explicitly in my project. These are probably being called from within map or another Rx method.

UPDATE

I updated my Gulp script to copy all the Rx libraries and folders instead of just the single bundle file. It fixed the issue.

Thierry Templier Thierry Templier · Accepted Answer · 2016-05-04T22:23:47

You need to include the Rx.js or Rx.min.js file from the node_modules/rxjs/bundles folder not node_modules/rxjs folder.

Otherwise you need to configure Rxjs in the SystemJS configuration:

System.config({
  map: {
    'rxjs': 'node_modules/rxjs',
    (...)
  },
  packages: {
    (...)
  }
});

Multiple Rx 404 errors in Angular2 component

2 Answers