I recently learned how to use system.js to import modules compiled with Typescript. Modules have been precompiled for require.js and work fine.
However, when merging with system.js, modules cannot be imported when using system-production.js. 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 do not quite understand what causes the error message. And when I apply system.src.js, there will be no error message, but I cannot use the functions in the imported modules. Any call will return undefined. So did I act wrong?
Below is the source code.
test.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> <script src="libs/js/system-production.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; }
Dependence1: 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 };