Error importing Typescript-compiled modules with System.js

Question

I am recently learning to use system.js to import modules which compiled by Typescript. The modules were previously compiled for require.js, and works fine.

However, when merging to system.js, the modules cannot be imported when applying system-production.js. The console says

Uncaught (in promise) Error: Module instantiation did not call an anonymous or correctly named System.register.
   Instantiating https://www.star.com/libs/js/klondike.js
   Loading ./libs/js/klondike.js
    at register-loader.js:203
t           @ common.js:83
(anonymous) @ loader-polyfill.js:70

I don't quite understand what causes the error message. And when I applying system.src.js, there won't be error message, but I cannot use functions in the imported modules. Any call will return undefined. So did I operate in a wrong way?

Below is the source code.

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
</body>

<!-- sys import -->
<script src="libs/js/system-production.js"></script>

<!--<script src="libs/js/system.src.js"></script>-->

<script>
    System.import("./libs/js/klondike.js");
</script>

</html>

tsconfig.json

{
  "compilerOptions": {
    "module": "System",
    "outFile": "../../js/klondike.js",
    "target": "es5",
    "sourceMap": true,
    "removeComments": true
  },
    "include": [
    "./*"
  ]
}

Main module: CardMoves.ts

//sys import
import * as DBJSN from "./debugJson";
import PokerCard from "./Cards";

let suits: string[] = ["spade", "heart", "club", "diamond"];
let cards: string[] = [, "A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K"];

//sys export
export function createDeck() {
    let playCards: PokerCard[] = new Array(DBJSN.settings.decks*52);

    console.log(playCards);

    for (let i=0; i<playCards.length; i++) {
        playCards[i] = new PokerCard();
        playCards[i].suit = suits[Math.floor(i % 52 / 13)];
        playCards[i].card = i % 52 % 13 + 1;
    }

    return playCards;
}

Dependency1: Cards.ts

//sys export
export default class PokerCard {
    private _suit: string;
    private _card: number;

    constructor() {}

    //Suit getter and setter
    get suit(): string {
        return this._suit;
    }

    set suit(newSuit: string) {
        try {
            if (this._suit === undefined)
                this._suit = newSuit;
            else
                throw "Suit value has been set.";
        }
        catch(e) {
            console.log(e);
        }
    }

    //Card getter and setter
    get card(): number {
        return this._card;
    }

    set card(newCard: number) {
        try {
            if (this._card === undefined)
                this._card = newCard;
            else
                throw "Card value has been set.";
        }
        catch(e) {
            console.log(e);
        }
    }
}

Dependency2: debugJson.ts

//sys export
export let settings = {
    decks: 1,
    cardsPerClick: 1,
    timer: true
};

Greg S · Accepted Answer · 2017-03-18 01:00:58Z

2

I had the same issue. The problem was I tried to use bundle as regular module. According to documentation bundle should have several System.register calls. Then you have to add this bundle via script tag as regular js file. And after that call your start point module (createDeck in your case I assume).

Please follow https://github.com/systemjs/systemjs/blob/master/docs/production-workflows.md for more information.

Hope this helps!

answered Mar 18, 2017 at 1:00

Greg S

1111 silver badge2 bronze badges

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

1 Comment

Kokodoko Over a year ago

Was this issue solved? I have the exact same problem. The documentation is very unclear on how to use js files that were bundled using the Typescript compiler.

Collectives™ on Stack Overflow

Error importing Typescript-compiled modules with System.js

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related