Add rxjs to Angular2 Quick Start and System.js packages?

Question

I'm trying to extend the angular2 quick start framework (https://angular.io/guide/quickstart) to include rxjs, and to also have System.js load the rxjs code from the bundle instead of loading 100's of individual .js files.

System.js config.map:

{
  "@app": "app/@app",
  "@angular": "node_modules/@angular",
  "angular2-in-memory-web-api": "node_modules/angular2-in-memory-web-api",
  "rxjs": "node_modules/rxjs"
}

System.js config.packages:

{
  "@app": {
    "defaultExtension": "js"
  },
  "rxjs": {
    "main": "/bundles/Rx.umd.js",
    "defaultExtension": "js"
  },
  "angular2-in-memory-web-api": {
    "main": "index.js",
    "defaultExtension": "js"
  },
  "@angular/common": {
    "main": "/bundles/common.umd.min.js",
    "defaultExtension": "js"
  },
  "@angular/compiler": {
    "main": "/bundles/compiler.umd.min.js",
    "defaultExtension": "js"
  },
  "@angular/core": {
    "main": "/bundles/core.umd.min.js",
    "defaultExtension": "js"
  },
  "@angular/forms": {
    "main": "/bundles/forms.umd.min.js",
    "defaultExtension": "js"
  },
  "@angular/http": {
    "main": "/bundles/http.umd.min.js",
    "defaultExtension": "js"
  },
  "@angular/platform-browser": {
    "main": "/bundles/platform-browser.umd.min.js",
    "defaultExtension": "js"
  },
  "@angular/platform-browser-dynamic": {
    "main": "/bundles/platform-browser-dynamic.umd.min.js",
    "defaultExtension": "js"
  },
  "@angular/router": {
    "main": "/bundles/router.umd.min.js",
    "defaultExtension": "js"
  },
  "@angular/router-deprecated": {
    "main": "/bundles/router-deprecated.umd.min.js",
    "defaultExtension": "js"
  },
  "@angular/upgrade": {
    "main": "/bundles/upgrade.umd.min.js",
    "defaultExtension": "js"
  }
}

Sample import statements form .ts files:

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

I can't see why this is still loading all individual rxjs files instead of recognizing the package and loading it instead. It loads all @angular/* packages as expected.

Evan Wieland · Accepted Answer · 2017-09-29 05:26:41Z

0

Try this

 var packages = {
    'rxjs':{ defaultExtension: 'js' }
  };

There is no main file mentioned in the tutorial

Try this answer also

edited Sep 29, 2017 at 5:26

Evan Wieland

1,5181 gold badge22 silver badges36 bronze badges

answered Aug 7, 2016 at 17:41

Jorawar Singh

7,6414 gold badges29 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Adam Policky Over a year ago

The quickstart does make use of the 'main' setting thru the packUmd() function, which sets the value for each of the various packages within @angular (@angular/common, @angular/compiler, etc). I am just following the same format for rxjs and adding what I think should be the correct values.

Jorawar Singh Over a year ago

I use webpack so I'm not so big help. Update me if you find out what was the issue. You can take a look at my seed I'd you want here is seed

Collectives™ on Stack Overflow

Add rxjs to Angular2 Quick Start and System.js packages?

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related