rxjs bundle from unpkg

Question

I have an angular 2.0.0 (same issue in 2.2.0) project. The current dev build generates > 100 http requests.

This is due to it loading non-bundled versions of rxjs..

When I have the following :

    map: {
        // our app is within the app folder
        app: 'app',
        // angular bundles
        // snip
        'rxjs': 'npm:rxjs',
        'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
    },

The app works but we have 1000+ http requsts , so I try to load rxjs from the bundle, todo this I remove rxjs': 'npm:rxjs' and I add the following

Note, for both the npm: loads from unpkg

    paths: {
        // paths serve as alias
        'npm:': 'https://unpkg.com/',
        'rxjs/*': 'https://unpkg.com/@reactivex/rxjs/dist/global/Rx.js'
    },

The ReactiveX git page suggests that this package should work or is it missing something else??

I get the following error with the second config

Uncaught (in promise): TypeError: Cannot read property 'call' of undefined

Answer 1

I have a plnkr.io demo for fiddling with RxJS in TypeScript that loads the bundled verison just like you.

See: http://plnkr.co/edit/0o9j6h5GJJiCuBFeWv7f

The important part is System.config:

System.config({
  transpiler: 'typescript',
  map: {
    'rxjs': 'https://unpkg.com/@reactivex/[email protected]/dist/global/Rx.js'
  }
});

Then importing anything from the bundle with just:

import {BehaviorSubject} from 'rxjs';

Edit:

The default Angular2 demo updated to load a single Rx.js.

See it live: http://plnkr.co/edit/rnO74mQNuPsHAmrIVJ8j

In systemjs.config.js I removed the rxjs form map completely and added to paths:

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

Then I'm using it with for example:

import { Component } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Component({
  selector: 'my-app',
  template: '<h1>My First Angular App</h1>'
})
export class AppComponent {

  constructor() {
    console.log(BehaviorSubject);
  }

}