Benny Neugebauer Benny Neugebauer - 1 year ago 75
TypeScript Question

How to export a TypeScript module for SystemJS?

On my website I want to import a

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');

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 &&;
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
is properly exported but I don't know why I cannot access the

Answer Source

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');

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download