CODEWITHSUNDEEP
typescriptsystemjs
Nikos
Nikos

Reputation: 7552

How to consume TypeScript module:system export with systemjs in browser

I’m trying to use systemjs, and I have exported this code with tsc: https://github.com/quantumjs/solar-popup/blob/master/package.json#L10

{
  "compilerOptions": {
    "module": "system",
    "target": "es5",
    "sourceMap": true,
    "outFile":"./build/solar-popup.js",
    "sourceRoot": "./src/SolarPopup.ts",
    "rootDir": "./src/"

  },
  "exclude": [
    "node_modules"
  ]
}

However then trying to consume it in the browser the imported object doesn't contain any of the exports. I think this is due to the solar-popup.js not containing any exports, just System.register calls

enter image description here

The export looks like this:

System.register("SolarPopup", ["ModalBackground", "constants"], function (exports_4, context_4) {
    "use strict";
    var __moduleName = context_4 && context_4.id;
    var ModalBackground_1, constants_2, SolarPopup;
    return {
        setters: [
            function (ModalBackground_1_1) {
                ModalBackground_1 = ModalBackground_1_1;
            },
            function (constants_2_1) {
                constants_2 = constants_2_1;

etc

Upvotes: 2

Views: 620

Answers (1)

artem
artem

Reputation: 51629

When you have these two options in tsconfig.json

"module": "system",
"outFile":"./build/solar-popup.js",

TypeScript generates single output file that contains several System.register calls, each registering a module with its own name:

 System.register("SolarPopup", ["ModalBackground", "constants"], function ...

"SolarPopup" is a module name here. SystemJS interprets such file as a bundle, not a module.

The result of importing a bundle is an empty object, and a side effect is that all modules inside are registered and are available immediately for importing without need to fetch them.

So you need an additional import to get a module from the bundle. Try this:

System.import('../build/solar-popup.js').then(function() {
    System.import('SolarPopup').then(function(SolarPopup) {
        console.dir(SolarPopup);
    });
});

Upvotes: 3

Related Questions