Wie starte ich eine Typescript App mit SystemJS Modulen?

Question

Ich bin mit dem Typoskript Compiler meine Module in ein main.js Datei zu bündeln, um diese Einstellungen in tsconfig.json mit:

"module": "system", 
"out": "docs/js/main.js" 

Dies funktioniert, so nach dem SystemJS documentation, ich muss nur die SystemJS umfassen Produktionsdatei und die App mit diesen Tags in meinem HTML Kickstart:

<script src="js/system.js"></script> 
<script> 
    SystemJS.import('js/main.js'); 
</script> 

Meine App:

import { Message } from "./message"; 

export class App { 
    constructor() { 
     let demomessage = new Message("hello"); 
    } 
} 

export class Message {  
    constructor(str:string) { 
     console.log(str); 
    } 
} 

Diese resu LTS in diesem Javascript-Code in main.js:

System.register("message", ...) { 
    // message code here 
}); 
System.register("app", ...) { 
    // app code here 
}); 

Der Teil, der mir fehlt (und das ist auch nicht in Microsoft's always-lacking-Typescript-documentation erklärt) ist, wie man tatsächlich die App starten ... Wie SystemJS wissen, welche Klasse ist Der Startpunkt? Auch wenn ich meine app setzen console.log in es funktioniert einfach nicht ausführen ....

EDIT

Ich entdeckte, dass system.js statt system production.js zumindest beginnt mit dem Prozess . Nach viel Basteln habe ich meine App mit dem folgenden Code begonnen, aber es sieht komisch und hässlich aus. Soll das so funktionieren?

<script src="js/system.js"></script> 
<script> 
    // get the anonymous scope 
    System.import('js/main.js') 
    .then(function() { 
     // now we can get to the app and make a new instance 
     System.import('app').then(function(m){ 
     let app = new m.App(); 
     }) 
    }); 
</script> 

Answer 1

Nach viel Kopf-Kratzen fand ich heraus, die Antwort ist einfacher als erwartet: laden Sie einfach das Bündel zunächst als reguläres JS-Datei, und dann können Sie die App direkt importieren:

<script src="js/system.js"></script> 
<script src="js/main.js"></script> 
<script> 
    System.import('app').then(function(module) { 
    let a = new module.App(); 
    }); 
</script>