Angular2, systemjs, Failed to use Rx.umd.js

Question

With the recent version of Angular RC4, Rxjs is available with node_modules or npmcdn.com directory.

Successful plunker but not using .umd.js

http://plnkr.co/edit/B33LOW?f=systemjs.config.js&p=preview

This is the Network tab screenshot of downloading individual files.

Of course, this setup makes a lot of individual RxJS files downloading because it's reading the files indidually, not .umd.js

However, like other AngularJS files, when I try to use a single umd.js file, the following error is happening.

GET https://npmcdn.com/[email protected]/bundles/Subject 404 ()
GET https://npmcdn.com/[email protected]/bundles/Observable 404 ()
GET https://npmcdn.com/[email protected]/bundles/observable/PromiseObservable 404 ()
...

Failing plunker trying to use .umd.js, and system.config.js

http://plnkr.co/edit/rVUNyz?p=preview&f=systemjs.config.js

systemjs.config.js

  var  map = {
    'app':                        'app',

    '@angular':                   'https://npmcdn.com/@angular', // sufficient if we didn't pin the version
    '@angular/router':            'https://npmcdn.com/@angular/router' + routerVer,
    '@angular/forms':             'https://npmcdn.com/@angular/forms' + formsVer,
    '@angular/router-deprecated': 'https://npmcdn.com/@angular/router-deprecated' + routerDeprecatedVer,
    'angular2-in-memory-web-api': 'https://npmcdn.com/angular2-in-memory-web-api', // get latest
    'rxjs':                       'https://npmcdn.com/[email protected]/bundles',
    'ts':                         'https://npmcdn.com/[email protected]/lib/plugin.js',
    'typescript':                 'https://npmcdn.com/[email protected]/lib/typescript.js',
 };

  //packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.ts',  defaultExtension: 'ts' },
    'rxjs':                       { main: 'Rx.umd.js', defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
  };

It seems like 'rxjs' is not using 'package' section at all. I don't see any difference between using the rxjs in packages section.

Only to make this plunker work, I have to change map section to the following without bundles

  'rxjs':                       'https://npmcdn.com/[email protected]',

My question is 'Is there a way to use Rx.umd.js with Angular2 application?'

Amphimacer

Did you get solution? – Enervated

Answer 1

I looked into the Rx.umd.js file and it seems this entire package uses a relative path import. This means that it can not find the files when the base of the rxjs package (in the map) has the /bundle suffix.

This makes sense, since what you use is the actual rxjs package and not its '/bundles' directory.

Hence, all you have to do is:

1. In the map section of systemjs.config.js change

   'rxjs':                       'https://npmcdn.com/[email protected]/bundles',
   

   to

   'rxjs':                       'https://npmcdn.com/[email protected]',
   

2. In the packages section, change

   'rxjs':                       { main: 'Rx.umd.js', defaultExtension: 'js' },
   

   to

   'rxjs':                       { main: 'bundles/Rx.umd.js', defaultExtension: 'js' },
   

or simply put, the /bundles should be part of the pacakge definition and not the mapping, since the mapping should point to the root of the package.

Here is an updated (working!) plunker with the minor changes required: http://plnkr.co/edit/3P6tLYMYOC24zc6JCkgO?f=systemjs.config.js&p=preview

--- EDIT (following @allenhwkim comment) ---

I further looked into it. Note that systemjs.config.js follows the bundles/xxx inside the package (and not map) section. See for example line 59.

My guess is that angular has its own reference to rxjs and it defines the package properly so it looks like your package definition is ignored.

To demonstrate that the package is relevant, and used, I added (in the plnkr) a dummy package called rxjs1 and I attempt to import it in the inedex.html file. Now run the plnkr and see it imported. Try changing the package definition to something that does not exist, for example Rxx.umd.js and you'll get an error. It appears the the package def is relevant when you use

System.import('package-name');

and not

import { someClass } from 'package-name';

Note that when you use the plnkr, changes to the package definition are not always tracked by plnkr and you need to refresh the page.

Moe

Thanks and upvoted for your answer, but it does not even read Rx.umd.js. Without packages/rxjs, the plnker still works. I think rxjs does not use packages/rxjs at all. – Amphimacer