Typoskript bündelt nicht angular2 und rxjs

Question

Das ist mein tsconfig.json

{ 
    "compilerOptions": { 
    "target": "es5", 
    "module": "system", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "removeComments": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "noImplicitAny": true, 
    "suppressImplicitAnyIndexErrors": true, 
    "outFile": "./js/app.js", 
    "typeRoots": [ 
     "./node_modules/@types" 
    ], 
    "types" : [ "node", "core-js" ] 
    }, 
    "include": [ 
    "./ts/**/*.ts" 
    ], 
    "exclude": [ 
    "**/*.spec.ts" 
    ] 
} 

Das ist mein system.config.js (Im Grunde genommen nichts)

System.import('main'); 

Was ich tue, ist, ich will alles bündeln in einem JS Datei, damit ich es für die Produktion verwenden kann. TypeScript hat die meisten Schritte für mich erledigt. Es bündelt alle meine Skripte in eine app.js Dateien.

aber ich habe

http://localhost/@angular/platform-browser-dynamic 404 (Not Found) 

in meinem Browser-Konsole.

Nach dem Graben in die app.js Ich entdecke, dass alle @angular und Rxjs Code sind nicht in der gebündelten Datei. Daher weiß SystemJs nicht, wie man nach ihnen sucht und die Skriptdateien auf die Standard-Art anfordert.

Mein Verständnis ist, in tsconfig.json die Linie "moduleResolution": "node", bereits Typoskript sagt @angular und Rxjs von der „Node Art und Weise“ zu laden, die zu node_module gehen bedeuten sollen, um diese Abhängigkeiten zu laden, aber es funktioniert nicht.

Answer 1

Typescript ist nur ein Sprachencompiler, kein Modulbündler. Sie möchten für diese Aufgabe Webpack verwenden, browserifizieren oder zusammenfassen.

Um einen üblichen Workflow-Witz webpack wäre

TS> es6> babel> webpack> Bündel

Ich weiß nicht, zu klären, wie systemjs funktioniert, aber Sie wollen nicht, Fähigkeiten zu bündeln verwenden Typoskript, wenn Sie zusätzliche Sachen bündeln müssen. Sie müssten sich für diese Aufgabe auf einen anderen Modulbündler verlassen und Typoskript tun, was er am besten kann: Kompilieren von Typoskript-Code.

Ein Webpack-Regelbeispiel wäre wie folgt. Beachten Sie, dass webpack die Loader unter Verwendung in umgekehrter Reihenfolge gilt, so die ts-Lader zuerst ausgeführt

module: { 
     rules: [ 
      { 
       test: /\.tsx?$/, 

       use: [{loader:'babel-loader', options: { presets: ['es2015'], plugins: ['add-module-exports'] }},'ts-loader'], 
       exclude: /node_modules/, 
      }, 
     ] 
    } 

Answer 2

Am Ende ich nicht direkt auf diese Frage lösen hat. Ich stelle fest, dass es einen besseren Weg gibt, mit Angular2 umzugehen, indem man Angular CLI verwendet, was eine Art offizieller Weg ist, ein Angular2-Projekt zu erstellen. Und ich benutze SystemJS nicht mehr.

Das kleine Problem mit SystemJS ist, dass es nicht von Webpack unterstützt wird. Es bedeutet, dass es nicht in Angular CLI verwendet werden kann.

Danielo ist wahr, dass TypeScript kein Modulbündler ist. Basierend auf meinem Verständnis von TypeScript, unterstützen sie alle Anforderungen in diesem Bereich, darunter auch ein Modulbündler, der im Moment vielleicht nicht so gut unterstützt wird.