通过打字稿中的System.js导入RxJS

Question

I'm trying to import RxJS 5 into a typescript app using System.js as the module type. It's almost there, but when I do

import * as Rx from "path/to/rxjs/Rx";

the Rx object doesn't contain the module contents of Rx directly, but has a property named 'default' that DOES contain the module contents:

Rx.Observable.of(1,2,3) ... //does not work, Rx.Observable is undefined
Rx.default.Observable.of(1,2,3) ... //DOES work, and contains the module contents as expected

My tsconfig looks like this:

{
    "compilerOptions": {
        "module": "system",
        "allowSyntheticDefaultImports" : true,
        "allowJs" : true,
        "noImplicitAny": true,
        "removeComments": false,
        "preserveConstEnums": true,
        "baseUrl" : "./",
        "sourceMap": true,
        "target": "es6",
        "lib" : ["dom","es6","dom.iterable","scripthost","es2015","es2016"],
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "outFile" : "./js/out.js"
    },
    "files": [
      "main.ts"
    ]
}

And my invocation of system.js looks like this:

System.config({
        "baseURL" : "/",
        packages: {
            '../node_modules/rxjs': {
              defaultExtension: 'js',
            }
          }
      });
      System.import("./js/out.js")
        .then(() => {
          console.log("js loaded");
          System.import("main");
        })
        .catch((err)=> {
          console.error("Error: " + err);
        });

I suspect that this is a configuration variable I need to pass to system.js, but the documentation on cross-module system imports isn't the most helpful to a newbie. I've already tried setting the package type of ../node_modules/rxjs to 'cjs' and it has the same result.

As an aside: 5 different module systems (AT LEAST!) for Javascript is sorta crazy. And I thought the Java Jigsaw brouhaha was bad.

Answer 1

You are importing all exports of path/to/rxjs/Rx in to a new object, Rx .

import * as Rx from "path/to/rxjs/Rx";

To instead import the module's default export, use this:

import Rx from "path/to/rxjs/Rx";