Angular: UMD bundle cannot be used for RxJS

[arpit-agarwal]

I'm submitting a ... (check one with "x")

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior
I updated system-config.ts file to download umd file for rxjs I.e rxjs\bundles\Rx.umd.js. This worked. But I still see in dev tools a lot of individual JS being load like rxjs\observer.js

Expected/desired behavior
When using UMD for rxjs it should not download individual files

Reproduction of the problem
See this plunker when you riun in full screen mode observe the files being loaded in dev tools. http://plnkr.co/edit/TvjW2YK3NVJ7sDb7cHV4?p=preview

No community response on question: http://stackoverflow.com/questions/37881825/using-rxjs-umd-bundles

What is the expected behavior?
When using UMD for rxjs it should not download individual files

What is the motivation / use case for changing the behavior?
To reduce load request when angular app starting up

Please tell us about your environment:

• Angular version: 2.0.0-rc.2
• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  Tested only on chrome
• Language: [all | TypeScript X.X | ES6/7 | ES5 | Dart]
  Tested with Typescript only

[dragGH102]

+1. I had the same issue

[arpit-agarwal]

There are direct imports of Rx sub module in @anguard/http which may lead to this issue. If @angular/http start using rxjs from umd module then this could be resolved.

[IgorMinar]

@robwormald this might a bigger issue than what I thought and is caused by deep imports into rxjs which won't work with umd. System.register format would handle this well, but that has other issues.

[pavandv]

One solution I came up with is that loading Rx.umd.js through script tag and removing all the entries related to RxJS from system-config.
This could resolve your issue.

[jalkanen]

@pavandv That solution does not seem to work; systemjs still attempts to load the individual script files.

[IgorMinar]

@pavandv @jalkanen you'd have to access rxjs via window.Rx then, right?

[mlc-mlapis]

Is there something new related to the problem with using RxJS bundle?

[gkgithub]

Is there any workaround until the issue is fixed. I tried loading through script and delete all rxjs entries in systemjs file. Still, systemjs tries to download the individual rxjs operator files. Its impacting the initial load performance

[arpit-agarwal]

You should use individual operators import (deep import). This will reduce the requests to 70-80 ( depending upon how heavily you use RxJS) from 275 by bundle like import

[robinkedia]

Hi - When can we expect a fix on this?

[rpaschoal]

@robinkedia,

It has a milestone related to RC5 upcoming release.

[fabricioferreira]

I don't think it is worth to use the umd bundle anyway. It seems Rxjs folks have broken down the components into smaller pieces, then you need to explicitly reference what you want to use. This have reduced the amount of files being downloaded a lot from previous versions.

At my company I switched to a different approach, where I copy all the .js files from the npm folder into a vendor folder using a gulp task:

const source = './node_modules/rxjs/**/*.js';
const dest = './wwwroot/vendor/rxjs';
module.exports.dep = function (gulp, plugins) { return function () { return plugins.del(dest); }; };
module.exports.task = function (gulp, plugins) {
return function () {
return gulp.src(source)
.pipe(gulp.dest(dest));
};
};

And then map it using system.js.config:
var map = { ... 'rxjs': './vendor/rxjs' ... }

At first I didn't like the solution, but later it proved to be acceptable.

[awerlang]

I don't think it is worth to use the umd bundle anyway. It seems Rxjs folks have broken down the components into smaller pieces, then you need to explicitly reference what you want to use. This have reduced the amount of files being downloaded a lot from previous versions.

Agreed. Loading individual files are only a problem in development mode with SystemJS loader. For production we bundle them into a single file for fast loading. But even if we get this to work (Rx UMD) we still have yet hundreds of files to deal with (on-the-fly typescript). So I believe the definitive answer for all of this is migration to webpack and angular-cli (I hope so).

TLDR: rxjs UMD is not helpful

[robinkedia]

Please help provide a interim solution if milestone has changed from RC5 to 2.0.1. Appreciate your support. Thanks!

[stefanocke]

As a workaround, I use rxjs SystemJS bundle in a script tag. It seems to work. No individual rxjs files are loaded. Are there any disadvantages with this approach (as workaround until umd can be used)?

[mlc-mlapis]

Yes, it looks good. I tried Rx.min.js from 'bundles' directory and no problems.

[damiandennis]

The including via script tag only works if you are not importing rxjs yourself.

[damiandennis]

There seems to be a problem with the new router v3 and rxjs, used to have below in "path" and it used to work:

 "rxjs/*": "node_modules/rxjs/bundles/Rx.umd.min.js"

[damiandennis]

related somehow to "of" and "ArrayObservable" just not sure why....

[mlc-mlapis]

What kind of problem you mean? We removed rxjs from system.js config completely and loading it only through the script tag. We use router V3 and no problems appeared.

[mlc-mlapis]

Hmm, "of" and "ArrayObservable", thanks. We will look.

[damiandennis]

bundling rxjs myself using systemjs-builder mostly fixed my issue. still get ~ 40 request though not really sure why. Here is how I bundled using gulp and systemjs-builder

gulp.task('ng-bundle-rxjs', function(done) {

    var builder = new Builder('./', './systemjs.config.js');
    builder
        .bundle([
            'node_modules/rxjs/add/**/*.js',
            'node_modules/rxjs/observable/**/*.js',
            'node_modules/rxjs/operator/**/*.js',
            'node_modules/rxjs/scheduler/**/*.js',
            'node_modules/rxjs/symbol/**/*.js',
            'node_modules/rxjs/util/**/*.js',
            'node_modules/rxjs/*.js'
        ], 'bundles/rxjs.min.js', {
            minify: true,
            sourceMaps: true,
            mangle: false
        })
        .then(function() {
            console.log('Build complete');
            done();
        })
        .catch(function(err) {
            console.log('Build error');
            console.log(err);
            done();
        });
});

and in systemjs.config.js

bundles: [
    "bundles/rxjs.min.js": ["rxjs/*"]
]

[karlhaas]

@damiandennis I took your approach and it works well as temporary solution. I think you should replace utils by util.

[damiandennis]

@karlhaas thanks that reduced another ~ 20 requests

[ricardojbertolin]

@damiandennis thank you for the proposed solution. I was able to bundling rxjs by myself, however, couldn't configure systemjs properly.

I mean, despite of using the bundle for rxjs, the angular modules (http, router, etc) still trying to load the individual rxjs libs.

Maybe there is something I'm forgetting? Thank you

[animator013]

@damiandennis I can confirm that new Router v3.0.0-rc.1 breaks the path solution

"rxjs/*": "node_modules/rxjs/bundles/Rx.umd.min.js"

I get:
TypeError: Cannot read property 'apply' of undefined

[JanNorden]

@mlc-mlapis When loading via a script tag, how do you get the typings right when you use rxjs types (such as Subject<> or Observable<>) in your own code?

[mlc-mlapis]

In a web browser it does not play any role. Typing is a factor for TS editor, compiler, ... I suppose that you use static compilation and not dynamic right in a browser.

[Delagen]

I make own webpack build of RxJS and angular umd bundles that works together.

[damiandennis]

This removes all but one request, Wildcard does not work it seems.

bundles: [
    "bundles/rxjs.min.js": [
        "rxjs/*",
        "rxjs/operator/*",
        "rxjs/observable/*",
        "rxjs/add/operator/*",
        "rxjs/add/observable/*",
        "rxjs/util/*"
    ]
]

[Delagen]

@animayor013 this cause a rxjs/operator/* imports that not resolvable in this rule

[robinkedia]

Before RC.6 I was using rxjs/bundles/rx.min.js in index.html to load 1 single file. With RC6 upgrade I do not see it any more. I just see rx.umd.js. If i use that I get bunch of 404 error. Even though i have suppressed rxjs in systemjs, it still attempts to load. It was working for me in .rc5

[bahodirk]

@karlhaas could you please share your solution? facing the same issue, can't find a way to make it run. Thank you.

[karlhaas]

@bahodirk I'm using the solution of @damiandennis . We had to change imports from 'rxjs' to 'rxjs/Rx' in our project.

[robinkedia]

Best is switch to webpack

On Monday, 5 September 2016, karlhaas [email protected] wrote:

@bahodirk https://github.com/bahodirk I'm using the solution of
@damiandennis https://github.com/damiandennis . We had to change
imports from 'rxjs' to 'rxjs/Rx' in our project.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/angular/angular/issues/9359#issuecomment-244744673,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AJ6mG8ykN0MQrPmZFtePaAFrjvny1KXOks5qnBaNgaJpZM4I5Yvv
.

Cheers!

[damiandennis]

@robinkedia If angular2's default quickstart example switched to webpack I would be happy to do so but since their examples are in systemjs it has been easier to fix breaking changes (have been using since beta).

[woppa684]

Hey wait a minute, do I read between the lines that I can not use the new router without switching my entire build environment to webpack?

First I had to switch from the "script tag solution" to the "path solution" because we're using RxJS stuff in our code now. When I now wanted to start with the new router I immediately got:

core.umd.js:5995 EXCEPTION: Uncaught (in promise): TypeError: Cannot read property 'apply' of undefined

After reading all of this I still don't see a working solution with making use of the RxJS umd bundle right?

[damiandennis]

@woppa684 just build your own version of rxjs using systemjs builder as shown above.

[woppa684]

Hmm, ok, thanks! Never used systemjs-builder but I'll see if I can find out how it works. Hope I don't have to change our build/deployment system everytime a new version of something comes out.

Within my company (Canon) we are stuck to Visual Studio for development, that's why I was very pleased when Angular2 was announced to be in TypeScript. Since our entire build is built around MSBuild I had to create numerous MSBuild targets to actually distibrute a working web application. Using "thirdparty" components like Angular and RxJS as bundles really helped (since we can not use npm, gulp etc). With RxJS not delivering a bundle anymore I have to see how I can fix this again...

Since Visual Studio automatically uses as build task for ts files I also don't see how I am going to use the new AoT compilation by the way. Ah well, yet another challenge I guess! :)

[woppa684]

For the latest beta (12) of rxjs they removed the UMD bundle again by the way ...

[kylecordes]

@woppa684 Visual Studio works very well for A2 development - we train people using that regularly. However, it doesn't have all the things it needs on its own. You will end up needing, 99% likely, to run the needed Node-based tooling inside your Visual Studio environment. New Visual Studio versions make this increasingly easy.

(Using A2 with no Node involved in the build tooling at all - that could be tough.)

[woppa684]

@kylecordes Yep, that's what we do ... we need to support systems in the field for 10 years after the latest sale so we have a lot of maintenance trees where we need to keep the build tooling as it was at that time. Therefore all thirdparty stuff we use is checked in in TFS (either binary or by source). We DO however have some node tooling available, but also this tooling is strictly versioned and kept with the trees in maintenance. Also, our build servers are not allowed to access the internet so then we would need to have local repos anyway ...

For example npm itself, typescript, karma, jasmine etc are considered development environment, however angular and rx are considered thirdparty libraries. Therefore the former are versioned by installers we create ourselves (to be installed on the development pc's of the engineers) and the latter is checked in in TFS together woth our code in the thirdparty section.

We also disallow engineers to create their own build configuration or build workflow, therefore we don't have files like package.json, tsconfig.json, karma.js etc in our project folders. For karma and webpack we have a generic one in our build tooling that has to work for all projects.

I'm pretty sure we should change this system sometime of course but changing stuff like this in a really large company takes a while ... For now we are very happy with A2 and we've created a pretty nice proto for the new UI of our printers, but having to find out with each release of either A2, zone.js or rxjs how the bundles have changed and how our build/bundling system has to change to fix it again is very, very tedious ... :)

Long story short, if anyone knows how to configure SystemJS to load everything I need from the Rx.min.js bundle provided with RxJS 5.0.0-beta.12 I'd be very happy, if not I will start investigating how to change our build/deployment system to overcome this :)

[Huck]

having the same (or similar) issue. been using rxjs through the systemjs config up to RC5 and it was working fine. In RC5, had to change for a script tag in index.html to include Rx.min.js. now that I upgraded to RC7 (and now 2.0.0), the index.html include doesn't work anymore. I reverted to the systemjs config file with:

paths: { 'rxjs/*': 'node/rxjs/Rx.min.js', },

but now I get errors in the router:

core.umd.min.js:21 Error: Uncaught (in promise): TypeError: Cannot read property 'call' of undefined
at l (zone.min.js:1)
at l (zone.min.js:1)
at eval (zone.min.js:1)
at e.invokeTask (zone.min.js:1)
at Object.onInvokeTask (core.umd.min.js:29)
at e.invokeTask (zone.min.js:1)
at n.runTask (zone.min.js:1)
at a (zone.min.js:1)
at XMLHttpRequest.invoke (zone.min.js:1)ErrorHandler.handleError @ core.umd.min.js:21next @ core.umd.min.js:29generatorOrNext.object.schedulerFn @ [...]
zone.min.js:1 Unhandled Promise rejection: Cannot read property 'call' of undefined ; Zone: angular ; Task: Promise.then ; Value: TypeError: Cannot read property 'call' of undefined(…) TypeError: Cannot read property 'call' of undefined
at ApplyRedirects.expandSegmentGroup (http://localhost:5000/node/angular2/router/router.umd.min.js:20:8956)
at ApplyRedirects.apply (http://localhost:5000/node/angular2/router/router.umd.min.js:20:7499)
at applyRedirects (http://localhost:5000/node/angular2/router/router.umd.min.js:6:7976)
at eval (http://localhost:5000/node/angular2/router/router.umd.min.js:20:29638)
at new e (http://localhost:5000/node/zone/zone.min.js:1:18127)
at Router.runNavigate (http://localhost:5000/node/angular2/router/router.umd.min.js:20:29443)
at eval (http://localhost:5000/node/angular2/router/router.umd.min.js:20:28999)
at e.invoke (http://localhost:5000/node/zone/zone.min.js:1:15913)
at Object.onInvoke (http://localhost:5000/node/angular2/core/core.umd.min.js:29:16609)
at e.invoke (http://localhost:5000/node/zone/zone.min.js:1:15864)

this is completely blocking us and is a serious problem.

due to our development model, we do not want to change for webpack any time soon. Systemjs with transpiling in the browser is perfect for us in development. in prod, we simply change to the compiled js. Squeezing every single bit of performance is not an issue for us internally.

thanks

edit: just replaced the Rx.min.js bundle with the full package, pointing to Rx.js instead and it works now, so the problems is definitely caused by Rx.min.js bundle. Current solution is really not ideal, because it adds almost 50 calls to the load time. how can we use the bundle in 2.0.0?

[unlight]

To fix this issue we need to generate Rx SystemJS bundle by ourselfs

const Builder = require("systemjs-builder");
// SystemJS build options.
var options = {
    normalize: true,
    runtime: false,
    sourceMaps: true,
    sourceMapContents: true,
    minify: false,
    mangle: false
};
var builder = new Builder('./');
builder.config({
    paths: {
        "n:*": "node_modules/*",
        "rxjs/*": "node_modules/rxjs/*.js",
    },
    map: {
        "rxjs": "n:rxjs",
    },
    packages: {
        "rxjs": {main: "Rx.js", defaultExtension: "js"},
    }
});

builder.bundle('rxjs', 'node_modules/.tmp/Rx.js', options),

This will generate bundle ready to consume by SystemJS.

Inject <script src="node_modules/.tmp/Rx.js"></script> to html

So, any rxjs/* import statements (e.g import rxjs/Observable) will not cause 50+ requests by SystemJS.

````` **Important**! In yoursystemjs.configshould be nothing related torxjs`, if it will
For example:

map = {
     "rxjs": "n:rxjs",
};

It will cause again 50+ requests...
``````

[Huck]

@unlight

your solution works perfectly. thank you so much!

[ricardojbertolin]

After testing other solutions, @unlight your solution works definitely fine. thanks!!

[subsite]

Thank you @unlight it works great! I experimented further and added minification to the script:

var compressor = require('node-minify');

...

builder.bundle('rxjs', 'node_modules/.tmp/Rx.js', options)
    .then(function() {

    new compressor.minify({
        type: 'uglifyjs',
        fileIn: 'node_modules/.tmp/Rx.js',
        fileOut: 'node_modules/.tmp/Rx.min.js',
        callback: function(err, min){
            if (err) {
                console.log(err);
            }
        }
    });
});

The other compressors of node-minify (gcc, yui) threw errors, but uglifyjs works. Size went from 766K to 394K.

[unlight]

@subsite
systemjs-builder has option minify and related to minification mangle.
See https://github.com/systemjs/builder#minification--source-maps

[subsite]

@unlight
Sorry, didn't read carefully enough. And thanks, tested builder's minify option and it works too, no need to complicate things.

[digdugpooka]

@unlight , I will probably never meet you but you are my new best friend. Thanks to you I'm successfully bundling RxJS and it has dramatically reduced the number of HTTP requests. I still can't believe how excruciating it is to bundle, minify, and deploy Angular 2 apps from Visual Studio 2015, but your post helped me take a big step forward. Thanks again.

[mh-dev]

I am not sure if this is a bug in the SystemJs, RxJS or Angular 2. But it is really annoying. The workaround above did not work for me. This might be because of an incorrect configuration of SystemJs.
I even tried to create a SFX bundle, but it ended up with the same error as with the original bundle. Its not that I run into this with a special edge case. I did the tutorial with my own gulp script.
I copy at the moment all js files of rxjs into my build directory and let SystemJs load them one piece after another until there is a real solution for the problem.

[karlhaas]

Currently, PyCharm/WebStorm suggests the import import {Observable} from 'rxjs'; for Observable of rxjs. With the self-bundled version of rxjs, SystemJS does not find rxjs. I get the following error:

Uncaught (in promise) Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/build/ee/ui/ca2/node_modules/rxjs.js
    Error: XHR error (404 Not Found) loading http://localhost:3000/build/ee/ui/ca2/node_modules/rxjs.js

Does anybody have a SystemJS configuration which solves this problem?

It works with import {Observable} from 'rxjs/Rx'; but it is very inconvenient to change the imports manually or find the problem when facing the above error.

[mh-dev]

I created a plunker that shows the issue. It is a fork of the tour of heros router live example with three modifications.
Link: http://plnkr.co/edit/sxyxnsszm9cM0vDnZu66?p=preview

• add 'https://unpkg.com/[email protected]/bundles/Rx.js' as script to index.html
• add 'rxjs/*': 'https://unpkg.com/[email protected]/bundles/Rx.js' in paths to 'sytem.config.js'
• comment 'rxjs': 'npm:rxjs' in 'system.config.js'

[mlc-mlapis]

@unlight Really great advice. It works on Angular 2.1.0 and re-bundled Rx.js has 377 kB.

[mh-dev]

Problem does still exist with angular 2.1.1 and router 3.1.1
@vicb can you update the labels I don't think they are accurate . This bug is in my opinion a major issue, since it occurs even with the tutorial if your using the bundled rxjs file. Or verify that this is a bug of rxjs.

[mlc-mlapis]

@mh-dev ... the re-bundled file works for you? Just to be sure.

[mh-dev]

I quote myself "The workaround above did not work for me. This might be because of an incorrect configuration of SystemJs". I am not blocked by the bug, since I workaround by loading each sub file. But this does not change that this is an issue and not labeled correctly.

[mlc-mlapis]

@mh-dev Sure, I just wanted to know. I do not have this problem. My SystemJS config does not contain RxJS at all and I am just loading re-bundled rx.min.js through script tag in my index.html. So it is interesting where is the problem on your side because of the simplicity of that.

[mh-dev]

Can you upload your rebundled file? I can then test if you maybe did something wrong with the creation of the bundle when I am back at home. (I created a bundle on my own and had nothing in the system.js file related to rxjs either during my test and still had an issue)

[mlc-mlapis]

@mh-dev Here it is (version "5.0.0-beta.12"). I used only "minify" (377 kB) and not "mangle" (originally 223 kB) so maybe this is the difference.
Rx.zip

[mh-dev]

Seems, that I miss something that needs to be done using this file.
I created a plunker based on the router tutorial live example that adds this file and disables rxjs in system js config
See http://plnkr.co/edit/WL7jesqDp6o81WUvgOU6?p=preview

[mlc-mlapis]

You did not comment lines 52, 53, 54 in systemjs.config.js:

rxjs: {
   defaultExtension: 'js'
},

I commented them and the plunk is working.

[mh-dev]

Ok, I can now use this fix. The problem in my local setup had a setting in package for '' which then triggered a default to rxjs. Thanks for the help (bug remains still open in my opinion)

[mlc-mlapis]

Yes, sure. I think that the problem in the original package of Rx.min.js is somewhere due to mangling.

It is evident that a bug issue should be created for it but I do not have any idea which place exactly is wrong and without that understanding it is hard to describe it properly.

[AlexanderLeonov]

I have another issue directly related to this thread. I'm using only bundles in my app, beginning from dev. Particularly, I'm using http-testing bundle together with rxjs bundle for my unit tests. The issue is that http-testing directly imports 'rxjs/operators/take' which is not exported from rxjs bundle, so I ended up with the following error:

TypeError: undefined is not an object (evaluating 'rxjs_operator_take.take.call') (line 20)
MockConnection
createConnection
httpRequest
request
query

I fixed it like this:

• 're-export' it back myself in the one of my source files:

import {Observable} from 'rxjs';
export const take = Observable.prototype.take;

• map this export in the system.js config:

map: {
    ......
    'rxjs/operator/take': 'testing/ng2-http-testing-import-fix'
}

It worked well, but still I believe that this import should be fixed in the /modules/@angular/http/testing/mock_backend.ts code.

[jiminsc]

@mlc-mlapis hi，I just run the plunk app, and find individual request for rxjs just like that ，did i miss something important

[mlc-mlapis]

@jiminsc Hi, which plunk do you mean?

[jiminsc]

@mlc-mlapis tks for your reply .it's here : http://plnkr.co/edit/WL7jesqDp6o81WUvgOU6?p=preview

[mlc-mlapis]

@jiminsc Hi, you did not read carefully the previous conversation. It is necessary to comment lines 52, 53, 54 in systemjs.config.js file to eliminate the relation to RxJS. I tried it and the plunk works as expected.

[nros]

I have the same issue, using the node_module/rxjs/bundles/Rx.js file in combination with bundled Angular UMD modules (eg: node_module/@angular/router/bundles/router.umd.js).

However, I much dislike re-inventing the wheel and create my own bundle file. I prefer to stick with vendor provided files, because these files have presumably been tested by the "vendor". So I dug into SystemJS and have found a solution, utilizing a custom loader for RxJS parts.

https://gist.github.com/nros/311962c6e0ffb67b4e6aada67e1821f0

Both files can be concatenated to one file in order to save an additional HTTP request.
(disclaimer: It is not yet thoroughly tested and not yet ready for production use, though!)

[mlc-mlapis]

Hmm, not sure if this way is better than re-bundling.

[jiminsc]

@mlc-mlapis Yes, it works. Thank you very much.

[nros]

@mlc-mlapis IMHO, It's good to have a choice.

Whoever prefers a customized build, can do! I think it can be worth it. Nevertheless, using vendor provided files is much easier. I am still struggling with webpack to create a custom bundle the way I want it. It seems not that easy to fulfill my requirements ...

[steve3d]

After reading a lot of discussion, I've finally got a workable perfect solution, first use systemjs-builder to build a rxjs systemjs bundle:

    const Builder = require("systemjs-builder");
    var builder = new Builder('./');
    builder.config({
        paths: {"rxjs/*": "node_modules/rxjs/*.js"},
        map: {"rxjs": "node_modules/rxjs"},
        packages: { "rxjs": {main: 'Rx.js', defaultExtension: "js"} }
    });

    builder.bundle('rxjs', 'your-own-path/Rx.min.js', {
        sourceMaps: true,
        minify: true,
        mangle: true
    });

then in your system.config.js file remove everything related to rxjs, and then add a bundle like this

        bundles: {
            "your-own-path/Rx.min.js": [
                "rxjs/*",
                "rxjs/operator/*",
                "rxjs/observable/*",
                "rxjs/add/operator/*",
                "rxjs/add/observable/*",
                "rxjs/util/*"
            ]
        }

then no additional work to do and no need to include Rx.min.js to script tag in html, systemjs will automatically only load the Rx.min.js.

after this, my simpe app's requests reduce from over 500 to only 86( over half of these are images and other scripts and css files). and the final Rx.min.js is only 258Kb.

this is close to a perfect solution so far. and thanks to @unlight and @damiandennis.

[mlc-mlapis]

@steve3d Fine, the only question is why the original Rx.min.js does not work by the same way.

[kylecordes]

The above snips from @steve3d are very helpful. For a situation where it is helpful to load as much as possible via system JS at runtime, I have been running something similar but rougher, and will upgrade to this set up shortly.

[robwormald]

closing this, as there's a number of useful solutions, and this issue isn't something that angular can fix. thanks for helping out @unlight @damiandennis @steve3d 👍

[steve3d]

@mlc-mlapis , well, that would beyond my knowledge.... sorry I can not answer that.

but one thing for sure, the Rx.min.js bundled with rxjs, is only 139kb, and non-minfied Rx.js have 542kb, but systemjs-builder build full Rx.js over 700kb, and minfied and mangled Rx.min.js have 253kb. that may be the problem, I don't believe the systemjs bundle would simply add over 200kb to a bundle. so the only question is that Rx.js shipped with rxjs is not meant for systemjs.

[mlc-mlapis]

@steve3d ... well, it is the same on me so I created an issue at RxJS repo (https://github.com/Reactive-Extensions/RxJS/issues/1386) and maybe there is somebody who knows the answer. We will see.

[robwormald]

The reason the System bundle is larger is the same reason this issue exists:

A UMD bundle does not expose all of its internal modules (which is why you cannot deep import into a UMD bundle), and so it can flatten / remove all the module wrapping)

A System.register bundle does expose all the modules (which is why you can deep import from them), and there is a significant amount of overhead to maintain that structure.

[mlc-mlapis]

Rob, you are telling us that Rx.min.js and Rx.js files from bundles directory of RxJS node module are files with UMD internal structure? As I remember some time ago there were files Rx.umd.js, Rx.min.js, Rx.js in this directory and from some version of RxJS the Rx.umd.js disappeared.

If it is true then it is really funny because your answer is evident but nobody mentioned that here and I also did not realize it.

[kylecordes]

I wonder if it is possible to configure system builder or another tool to yield a bundle like this:

• System bundle format
• With the entry point modules exposed as system modules, so that it can actually work
• But with all the numerous other internal modules squashed into a blob with rollup or similar, so as to not be any larger than necessary

It seems to me that such a thing would be the ideal way to distribute RxJS as a bundle, for use in cases where application level bundling is not suitable.

[tigredonorte]

i tryied the @steve3d approach but doesn't works. The follow error occurred

Error: (SystemJS) Unexpected token < SyntaxError: Unexpected token < at eval (<anonymous>) Evaluating http://localhost:10350/rxjs/Subject.js Error loading http://localhost:10350/main.js at eval (<anonymous>) Evaluating http://localhost:10350/rxjs/Subject.js Error loading http://localhost:10350/main.js

I used grunt task to build Rx (i installed systemjs-builder via npm too):
`

var Builder    = require("systemjs-builder");

gulp.task("rxjs", () => {

    var builder = new Builder('./');

    builder.config({
        paths: {"rxjs/*": "node_modules/rxjs/**/*.js"},
        map: {"rxjs": "node_modules/rxjs"},
        packages: { "rxjs": {main: 'Rx.js', defaultExtension: "js"} }
    });

    builder.bundle('rxjs', 'public/lib/rxjs/Rx.min.js', {
         sourceMaps: true,
        minify: true,
        mangle: true
    });
});

`

and my system.config.js is (i put all file to prove theres nothing about rx running):
`

(function (global) {
  System.config({
    typescriptOptions: {
      tsconfig: true
    },
    meta: {
      'typescript': {
        "exports": "ts"
      }
    },
    paths: {
      'npm:': 'lib/'
    },
    bundles: {
        "npm:rxjs/Rx.min.js": [
            "rxjs/*",
            "rxjs/operator/*",
            "rxjs/observable/*",
            "rxjs/add/operator/*",
            "rxjs/add/observable/*",
            "rxjs/util/*"
        ]
    },

    map: {
      app: '',

      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',

      // angular testing umd bundles
      '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
      '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
      '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
      '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
      '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
      '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
      '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
      '@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js',

      // other libraries
      //'rxjs':                      'npm:rxjs',
      'angular2-in-memory-web-api':'npm:angular2-in-memory-web-api',
      'angular2-jwt':              'npm:angular2-jwt/angular2-jwt.js',
      //'ts':                        'npm:plugin-typescript/lib/plugin.js',
      //'typescript':                'npm:typescript/lib/typescript.js',
      'angular2-text-mask':        'npm:angular2-text-mask/dist',
      'angular2-datatable':        'npm:angular2-datatable',
      'lodash':                    'npm:lodash',
      'ng2-completer':             'npm:ng2-completer/bundles/ng2-completer.min.js',
      'ng2-slim-loading-bar':      'npm:ng2-slim-loading-bar/bundles/index.umd.js',
      'ng2-translate':             'npm:ng2-translate/bundles/index.js'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
      //'rxjs'                      : {main: "Rx.min.js", defaultExtension: 'js'},
      'angular2-in-memory-web-api': {defaultExtension: 'js'},
      'angular2-jwt'              : {defaultExtension: 'js'},
      'ng2-slim-loading-bar'      : {defaultExtension: 'js'},
      'ng2-translate'             : {defaultExtension: 'js'},
      'ng2-completer'             : {format: 'cjs' },
      'lodash'            : {main:'index.js'            , defaultExtension:'js'},
      'angular2-datatable'        : {main: 'index.js'           , defaultExtension: 'js'},
      'angular2-text-mask'        : {main: 'angular2TextMask.js', defaultExtension: 'js' }
    }
  });
})(this);

`

I using

• angular v~2.1.2,
• rxjs v5.0.0-beta.12,
• systemjs-builder v^0.15.34

Does anyone know what's wrong in my code?

[mh-dev]

I think I had a similar problem and it was related to that the 'app' package resides in ''. Try to move that into a sub folder.

[IsaacBorrero]

Has there been an agreed upon, common, solution for this? Would love to stop pulling individual files.

[tigredonorte]

@mh-dev i changed my app folder, but it doesnt works too. :(

PS: i moved all files to app folder (except index and system.config.js) then i put app:'app' in system.config.js

[steve3d]

@tigredonorte

try to use a relative path instead of npm: in bundles part.

[steve3d]

this is my system.config.js, works very well:

'use strict';

(function (global) {
    System.config({
        "defaultJSExtensions": true,
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app: 'scripts',
            modules: 'scripts/modules',
            // angular bundles
            '@angular/core': 'assets/global/plugins/@angular/core/bundles/core.umd.min.js',
            '@angular/common': 'assets/global/plugins/@angular/common/bundles/common.umd.min.js',
            '@angular/compiler': 'assets/global/plugins/@angular/compiler/bundles/compiler.umd.min.js',
            '@angular/platform-browser': 'assets/global/plugins/@angular/platform-browser/bundles/platform-browser.umd.min.js',
            '@angular/platform-browser-dynamic': 'assets/global/plugins/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.min.js',
            '@angular/http': 'assets/global/plugins/@angular/http/bundles/http.umd.min.js',
            '@angular/router': 'assets/global/plugins/@angular/router/bundles/router.umd.min.js',
            '@angular/forms': 'assets/global/plugins/@angular/forms/bundles/forms.umd.min.js',
            'moment': "assets/global/plugins/moment.min.js"
        },
        bundles: {
            "assets/global/plugins/Rx.min.js": [
                "rxjs/*",
                "rxjs/operator/*",
                "rxjs/observable/*",
                "rxjs/add/operator/*",
                "rxjs/add/observable/*",
                "rxjs/util/*"
            ]
        }
    });
})(this);

if it's not work for you, then, I'm pretty sure the problem is yours only. and try to update rxjs to rc.4, few things have changed after beta.12.

here is my spec:
angular 2.3.1
rxjs 5.0.rc4
systemjs 0.19.38
systemjs-builder 0.15.34

[Jan-M]

@unlight thx - your solution works for me, too. But only if I do change my imports to use from 'rxjs/Rx'.

From a JS beginners perspective this is kind of a bummer as the Angular tutorial leads straight to Observables and the code does indeed work but one has to fiddle with this import/dependency.

[mlc-mlapis]

Updated version of system.config.js config -> should be added line "rxjs/symbol/*" to:

bundles: {
            "assets/global/plugins/Rx.min.js": [
                "rxjs/*",
                "rxjs/operator/*",
                "rxjs/observable/*",
                "rxjs/add/operator/*",
                "rxjs/add/observable/*",
                "rxjs/symbol/*",
                "rxjs/util/*"
            ]
        }

for spec:

angular 2.4.6
rxjs 5.1.0
systemjs 0.19.46
systemjs-builder 0.16.2

[fredgate]

@mlc-mlapis Where does the file _assets/global/plugins/Rx.min.js_ (declared in the bundles configuration of systemjs) come from ? Is it the file provided in the npm package, or is it a file rebuilt by yourself using SystemBuilder ?

[mlc-mlapis]

The second is right. This is the file which represents the re-bundled version of RxJS. You can save it where you want. I am saving it at "assets/rxjs-bundle/Rx.min.js".

[jayoungers]

for the solutions that are using systemjs-builder, is part of the reason the compiled file is so large because the node_modules/rxjs/bundles folder is included, or do those files not impact the final result?

[guest73]

Tried everything out here. Nothing works for me.
Here is my structure:
app/
app.module.ts
...
node_modules/
your-own-path/
Rx.min.js
index.html
systemjs.config.js
...

I built the Rx.min.js as suggested.
Here is my systemjs.config.js

(function (global) {
    SystemJS.config({
        bundles: {

            "your-own-path/Rx.min.js": [
                "rxjs/*",
                "rxjs/operator/*",
                "rxjs/observable/*",
                "rxjs/add/operator/*",
                "rxjs/add/observable/*",
                "rxjs/symbol/*",
                "rxjs/util/*"
            ]

        },
        paths: {
            // paths serve as alias
            'npm:': 'node_modules/'
        },

        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app: 'app',

            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

            // other libraries
            'angular-tree-component': 'node_modules/angular-tree-component/dist/angular-tree-component.umd.js',
            //color picker
            'angular2-color-picker': 'node_modules/angular2-color-picker'

        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: './main.js',
                defaultExtension: 'js'
            },
            'angular2-color-picker': {
                main:'index.js',
                defaultExtension: 'js',
            }
        }
    });
})(this);

Here what I get as an output:
[1] 17.03.24 21:54:38 200 GET /your-own-path/Rx.min.js
[1] 17.03.24 21:54:39 404 GET /node_modules/systemjs/dist/Rx.min.js.map
[1] 17.03.24 21:54:39 404 GET /rxjs

What am I doing wrong?

[kylecordes]

@guest73 You can see the exact config I use to create a System bundle of RxJS here:

https://github.com/OasisDigital/rxjs-system-bundle

You can see it in use, here:

https://plnkr.co/edit/Fy0jvu?p=preview

Offhand, the main difference I see between my config and yours is a bit in the systemjs config:

    rxjs: {
      defaultExtension: false
    }

... but there could be something else also, of course.

[guest73]

Thanks @kylecordes, it kind of helped. The problem, seems to me, was in a way we referenced RxJS stuff in our own project.
There were 3 variants:

import { Observable } from 'rxjs/Rx';
import { Observable } from 'rxjs/Observable';
import { Observable } from 'rxjs';

and also something like this

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

I removed the operator imports and made everything to be like import { Observable } from 'rxjs/Rx';
After this it started working.

[kylecordes]

@guest73 The problem with this form:

import { Observable } from 'rxjs/Rx';

is that it imports 'rxjs/Rx' itself, which problematically imports all of the operators - you can see that happen in the file easily online here:

https://unpkg.com/[email protected]/Rx.js

I think the current "best" form to use is:

import { Observable } from 'rxjs/Observable';

This form:

• Avoids importing all the operators - import just the ones you use, for minimum output size.
• Is what I see most often "in the wild", and use in class materials (I teach Angular classes, among other things)
• ... and is the form Angular itself uses, see:

https://github.com/angular/angular/search?utf8=%E2%9C%93&q=from+%27rxjs%2FObservable%27&type=

[steve3d]

please guys, this doesn't make any sense on a production build, you'll always use a bundler to build all scripts with aot, and trust me, I've spent 4 days to try to figure out how to use webpack and systemjs together, and still there are some problems, and after turning to @angular/cli, it only takes me about 15mins to make a aot bundles.

and with angular 4.0, it seems systemjs way won't work any more, I've tried with some different settings, and none of those works, and that take me a whole day, and with @angular/cli, it's really about just few keystrokes, then everything is done, dev build with sourcemap and watch, and production build with aot, everything works like a charm.

please guys, don't waste any more time on this, unless of course, you must stick to angular 2 version forever.

angular/cli is FAR MORE easier than this systemjs way.

Now in my setup, I use angular/cli to pack everything, and with systemjs to load any scripts dynamically, or just leave this work to angular/cli to pack a whole bunch of 3rd-party jquery plugins.

after move to angular/cli, my system.config.js only contains these

    SystemJS.config({
        // map tells the System loader where to look for things
        map: {
            jquery: 'assets/global/plugins/jquery.min.js'
        }
    });

[Tailslide]

Webpack worked for me as well. It took way less time to learn webpack from scratch and add it to my project than I spent trying to get systemjs bundling working

[abu7midan]

the problem in bundles please copy this configjs or change it like this code

(function (global) {
    var map = {
        'app': 'app',

        // angular bundles
        '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
        '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
        '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
        '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
        '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
        '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
        '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
        '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

        // other libraries
        'rxjs': 'npm:rxjs',
        'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
    };
    var packages = {
        'app': { main: 'main.js', defaultExtension: 'js' },
        'rxjs': { defaultExtension: 'js' },
    };
    var ngPackageNames = [
        'common',
        'compiler',
        'core',
        'forms',
        'http',
        'platform-browser',
        'platform-browser-dynamic',
        'router'
    ];
    // Individual files (~300 requests):
    function packIndex(pkgName) {
        packages['@angular/' + pkgName] = { main: 'index.js', defaultExtension: 'js' };
    }
    // Bundled (~40 requests):
    function packUmd(pkgName) {
        packages['@angular/' + pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
    }
    // Most environments should use UMD; some (Karma) need the individual index files
    var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
    var config = {
        paths: {  'npm:': 'node_modules/'
        },
        map: map,
        packages: packages
    };
    System.config(config);
})(this);
`

its will works perfectly

[TsengSR]

@abu7midan: How is that going to help?

The systemjs loader will stick pick up the single files instead of the bundle in single request to the Rx.umd.js, which results anywhere between 80 and 150 additional requests to the server. And this happens in any non trivial case where you import rxjs/Rx.

[jeshcalls]

Thank you for this information. I was using the bundled rxjs without any issues. Today wanted to use angular material and when I use that, i get error,
http://localhost:8000/rxjs as "rxjs" from http://localhost:8000/node_modules/@angular/material/bundles/material.umd.js

[mlc-mlapis]

@jeshcalls ... can you show the exact error message?

[jeshcalls]

Please find the error below.

ERROR Error: Uncaught (in promise): Error: Error: XHR error (404 Not Found) loading http://localhost:8000/rxjs
at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:8000/node_modules/zone.js/dist/zone.js:636:29)
at ZoneDelegate.invokeTask (http://localhost:8000/node_modules/zone.js/dist/zone.js:225:37)
at Object.onInvokeTask (http://localhost:8000/node_modules/@angular/core/bundles/core.umd.js:3913:33)
at ZoneDelegate.invokeTask (http://localhost:8000/node_modules/zone.js/dist/zone.js:224:42)
at Zone.runTask (http://localhost:8000/node_modules/zone.js/dist/zone.js:125:47)
at XMLHttpRequest.ZoneTask.invoke (http://localhost:8000/node_modules/zone.js/dist/zone.js:293:33)
Error loading http://localhost:8000/rxjs as "rxjs" from http://localhost:8000/node_modules/@angular/material/bundles/material.umd.js

[mlc-mlapis]

@jeshcalls ... it means that there is nothing on URL http://localhost:8000/rxjs

What loader are you using? SystemJS?

[jeshcalls]

yeah I am using SystemJS, when I add a map entry in System.config.js to have rxjs: npm:rxjs, it is fetching from http://localhost:8000/node_modules/rxjs which has the folder but obviously individual js files of rxjs is fetched.

[mlc-mlapis]

@jeshcalls ... for re-bundled RxJS 5.5.x you should have the following if your systemjs.config.js, where assets/rxjs-bundle/Rx.min.js is the re-budled RxJS file:

bundles: {
        ...,
    "assets/rxjs-bundle/Rx.min.js": [
        "rxjs/*",
        "rxjs/operator/*",
        "rxjs/operators/*",
        "rxjs/observable/*",
        "rxjs/add/operator/*",
        "rxjs/operators/*",
        "rxjs/add/observable/*",
        "rxjs/scheduler/*",
        "rxjs/symbol/*",
        "rxjs/util/*"
    ],
        ...
}

[TsengSR]

@jeshcalls: SystemJS is dead. Angular moved away from it long ago to webpack and angular-cli now

[jeshcalls]

@mlc-mlapis : Thanks so much. I read through your previous posts on this and missed this. This bundle did not work but I added a map attribute as 'rxjs': 'npm:./tmp/Rx.js' and it worked.

[jeshcalls]

@TsengSR : You are absolutely right. Is there a web link that compares the system js and webpack modes. Have to show a consolidated presentation to my bosses to make them agree to make the shift.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

<sub>_This action has been performed automatically by a bot._</sub>