Error importing Typescript-compiled modules with System.js

问题

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
};

回答1:

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!

来源：https://stackoverflow.com/questions/42049525/error-importing-typescript-compiled-modules-with-system-js

标签

javascript

typescript

systemjs