How to export a TypeScript module for SystemJS?

Question

On my website I want to import a FancyModule using SystemJS, so that I can create instances of classes which this module exports.

So what I want to achieve is this (within a ECMAScript 2015-compatible website):

SystemJS.import('MyFancyModule').then(function(MyFancyModule) {
  var myFancyInstance = new MyFancyModule.MyFancyClass('Test');
  console.log(myFancyInstance.text);
});

Unfortunately, I am getting the following error:

TypeError: MyFancyModule.MyFancyClass is not a constructor(…)

Here is my TypeScript module:

export module MyFancyModule {
  export class MyFancyClass {
    public text: string;

    constructor(text: string) {
      this.text = text;
    }
  }
}

And this is my TypeScript compiler setting (tsconfig.json):

{
  "compilerOptions": {
    "module": "system",
    "moduleResolution": "node",
    "outFile": "dist/browser/MyFancyModule.js",
    "rootDir": "src/ts",
    "target": "es5"
  }
}

Which compiles my TypeScript module into:

System.register("MyFancyModule", [], function(exports_1, context_1) {
  "use strict";
  var __moduleName = context_1 && context_1.id;
  var MyFancyModule;
  return {
    setters: [],
    execute: function() {
      (function(MyFancyModule) {
        var MyFancyClass = (function() {
          function MyFancyClass(text) {
            this.text = text;
          }

          return MyFancyClass;
        }());
        MyFancyModule.MyFancyClass = MyFancyClass;
      })(MyFancyModule = MyFancyModule || (MyFancyModule = {}));
      exports_1("MyFancyModule", MyFancyModule);
    }
  }
});

For me it looks like MyFancyModule is properly exported but I don't know why I cannot access the MyFancyClass.

Answer 1

I think I managed to reproduce your example.

It looks like with this setup, the file - MyFancyModule.ts - is already a module in itself. When you do

export module MyFancyModule {

you create a nested module within it.

This code should work with everything else unchanged:

    SystemJS.import('MyFancyModule').then(function(MyFancyModule) {
        var myFancyInstance = new MyFancyModule.MyFancyModule.MyFancyClass('Test');
        console.log(myFancyInstance.text);
    });

Alternatively, you can remove export module from the .ts file and have export class at the top level - then your original import will work.

Answer 2

Typescript takes care of how to load the modules from the different module systems that it supports.
The idea is that you have a specific syntax of doing that (in typescript) and based on the module you specify to the compiler (for example in the tsconfig.json) it will generate the appropriate code for loading the modules according to the selected module system.

So all you need to do is:

import * as MyFancyModule from "MyFancyModule";

var myFancyInstance = new MyFancyModule.MyFancyClass('Test');
console.log(myFancyInstance.text);

---

Edit

The compiler should generate something like:

System.register(["MyFancyModule"], function(exports_1, context_1) {
    "use strict";
    var __moduleName = context_1 && context_1.id;
    var MyFancyModule;
    var myFancyInstance;
    return {
        setters:[
            function (MyFancyModule_1) {
                MyFancyModule = MyFancyModule_1;
            }],
        execute: function() {
            myFancyInstance = new MyFancyModule.MyFancyClass('Test');
            console.log(myFancyInstance.text);
        }
    }
});

As you can see there are no traces of this import from syntax in the compiled js.