SystemJS loads many files for rxjs

Question

I have the following systemjs.config.js (based on some example I found on the internet):

(function (global) {
    System.config({
        paths: {
            // paths serve as alias
            'js:': 'js/',
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app: 'app',
            // angular bundles
            '@angular/core': 'js:angular2/core.umd.js',
            '@angular/common': 'js:angular2/common.umd.js',
            '@angular/compiler': 'js:angular2/compiler.umd.js',
            '@angular/platform-browser': 'js:angular2/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'js:angular2/platform-browser-dynamic.umd.js',
            '@angular/http': 'js:angular2/http.umd.js',
            '@angular/router': 'js:angular2/router.umd.js',
            '@angular/forms': 'js:angular2/forms.umd.js',
            '@angular/upgrade': 'js:angular2/upgrade.umd.js',
            // other libraries
            'rxjs': 'js:rxjs',
            'angular-in-memory-web-api': 'js:in-memory-web-api.umd.js'
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: './main.js',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            }
        }
    });
})(this);

When I start my Angular2 application many individual rxjs files are loaded which takes a long time. I have a bundled version of RxJs in js/rxjs/bundles/Rx.js, so I tried to modify systemjs.config.js like this:

(function (global) {
    System.config({
        paths: {
            // paths serve as alias
            'js:': 'js/',
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app: 'app',
            // angular bundles
            '@angular/core': 'js:angular2/core.umd.js',
            '@angular/common': 'js:angular2/common.umd.js',
            '@angular/compiler': 'js:angular2/compiler.umd.js',
            '@angular/platform-browser': 'js:angular2/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'js:angular2/platform-browser-dynamic.umd.js',
            '@angular/http': 'js:angular2/http.umd.js',
            '@angular/router': 'js:angular2/router.umd.js',
            '@angular/forms': 'js:angular2/forms.umd.js',
            '@angular/upgrade': 'js:angular2/upgrade.umd.js',
            // other libraries
            'rxjs': 'js:rxjs/bundles/Rx.js',
            'angular-in-memory-web-api': 'js:in-memory-web-api.umd.js'
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: './main.js',
                defaultExtension: 'js'
            }
        }
    });
})(this);

When I try to start my application now, I get the following error in the browser:

Error: (SystemJS) Syntax error
    SyntaxError: Syntax error
       at Anonymous function (eval code:2:1)
    Evaluating http://localhost:37191/js/rxjs/bundles/Rx.js/Subject
    Evaluating http://localhost:37191/app/main.js
    Error loading http://localhost:37191/app/main.js

My main.ts looks like this:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

And my app.module.ts looks like this:

import 'rxjs';

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';
import { DeviceGroupsViewComponent } from './device-groups-view.component';

import { DeviceGroupService } from './devicegroup.service';
import { SourceTypeService } from './sourcetype.service';

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        AppRoutingModule
    ],
    declarations: [
        AppComponent,
        DeviceGroupsViewComponent
    ],
    providers: [
        DeviceGroupService,
        SourceTypeService
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

What do I have to change to make my app work with the bundled Rx.js?

Answer 1

if your setup is based on angular2 quickstart then you are doing OK.

However, you MUST NEVER

import {something} from 'rxjs/Rx';

this is wrong and will import the entire RxJS library (when you only want to use Observable).

import {Observable} from 'rxjs/Rx';

this is correct

import {Observable} from 'rxjs/Observable';

and will reduce the number of imports. Ensure you app has no references to 'rxjs/Rx'

PS You don't want to pull in the entire RxJS library in a single file as it would be very big. That's the whole reason behind only importing the RxJS modules you need.

Answer 2

Some time ago I made this demo that uses Angular2 and loads RxJS as a single bundle.

Basically, all I did was:

paths: {
    'rxjs*': 'https://unpkg.com/@reactivex/[email protected]/dist/global/Rx.js'
},

where the only important thing is rxjs* that matches for example rxjs/Subject or rxjs/add/operator/concat and so on.

See live demo on plnkr: http://plnkr.co/edit/rnO74mQNuPsHAmrIVJ8j?p=preview