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

Question

In the latest version of Angular RC4, Rxjs is available with node_modules or npmcdn.com .

Successful plunker but not using .umd.js

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

This is a screenshot of the Network tab for downloading individual files.

Of course, this setting allows you to load many individual RxJS files because they read the files individually, not .umd.js

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

 GET https://npmcdn.com/ rxjs@5.0.0-beta.6 /bundles/Subject 404 () GET https://npmcdn.com/ rxjs@5.0.0-beta.6 /bundles/Observable 404 () GET https://npmcdn.com/ rxjs@5.0.0-beta.6 /bundles/observable/PromiseObservable 404 () ... 

Unsuccessful plunker tries 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/ rxjs@5.0.0-beta.6 /bundles', 'ts': 'https://npmcdn.com/ plugin-typescript@4.0.10 /lib/plugin.js', 'typescript': 'https://npmcdn.com/ typescript@1.9.0-dev.20160409 /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 that rxjs does not use the package section at all. I do not see the difference between using the rxjs section in packages.

Just for this plunker to work, I need to change the map section to the next without bundles

  'rxjs': 'https://npmcdn.com/ rxjs@5.0.0-beta.6 ', 

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

Answer 1

I looked at the Rx.umd.js file and it seems that this whole package uses a relative import path. This means that it cannot find files if the base of the rxjs package (on the map) has the suffix / bundle.

This makes sense since you are using the actual rxjs package and not the '/ bundles' directory.

Therefore, all you have to do is:

• In the map section of systemjs.config.js, change

   'rxjs': 'https://npmcdn.com/ rxjs@5.0.0-beta.6 /bundles', 

  to

   'rxjs': 'https://npmcdn.com/ rxjs@5.0.0-beta.6 ', 

• In the "packages" section, change

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

  to

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

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

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

--- EDIT (after the comment by @allenhwkim) ---

I also learned this. Note that systemjs.config.js follows / xxx packages inside the package section (not the map). See, for example, line 59.

I assume angular has its own link to rxjs and it defines the package correctly, so it looks like your package definition is ignored.

To demonstrate that the package is relevant and used, I added (in plnkr) a dummy package called rxjs1, and I will try to import it into the inedex.html file. Now run plnkr and see it imported. Try changing the package definition to something that does not exist, for example Rxx.umd.js, and you will receive an error message. Apparently the def package matters when you use

 System.import('package-name'); 

but not

 import { someClass } from 'package-name'; 

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