活字体はangular2とrxjs

Question

をこれはバンドルされていない、私のこれがある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" 
    ] 
} 

私system.config.js（基本的には何もありません）、私は1つJSにすべてをバンドルしたいされて私は何をやっている

System.import('main'); 

私は生産のためにそれを使用することができます。 TypeScriptは私のためのほとんどのステップを行いました。すべてのスクリプトを1つのapp.jsファイルにまとめます。

しかし、私は私のブラウザのコンソール上

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

を得ました。

app.jsを掘り下げた後、すべての@angularとRxjsコードがバンドルされたファイルに含まれていないことがわかりました。だから、SystemJsはそれらを探して、デフォルトの方法でスクリプトファイルを要求する方法を知らない。

私の理解では、tsconfig.jsonにライン"moduleResolution": "node",は、すでにそれらの依存関係をロードするためにnode_moduleに行く意味すべき「ノード道」で@angularとRxjsをロードするために活字を言っているが、それはしていません。

Answer 1

Typescriptは単なる言語コンパイラであり、モジュールバンドラではありません。あなたはその仕事のためにwebpack、browserifyまたはrollupを使いたいと思う。通常のワークフローウィットのWebPACKは

TS> ES6>バベル>のWebPACK>バンドル

だろう明確にする

私は作品をsystemjs方法がわからない、しかし、あなたはのバンドル機能を使用する必要はありません余分なものをバンドルする必要がある場合はtypescript。そのタスクのために別のモジュールバンドラーに頼らざるを得ず、typescriptコードをコンパイルすることで、typescriptを最善のものにしておく必要があります。

Webpackルールの例は次のとおりです。 WebPACKのは逆の順序で使用下ローダーを適用し、そのTS-ローダは私が直接、この質問を解決しませんでした終わり

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

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

Answer 2

最初に実行されることに注意してください。私はAngular2プロジェクトを構築する公式な方法の一種であるAngular CLIを使ってAngular2を処理するより良い方法があることに気付きました。私はもうSystemJSを使用していません。

SystemJSを使用する場合の小さな問題は、Webpackではサポートされていないことです。 Angular CLIでは使用できません。

ダニエロは、TypeScriptがモジュールバンドラではないことに真実です。しかし、私はTypeScriptの理解に基づいて、現時点ではあまりサポートされていないかもしれないモジュールバンドラを含む、現場でのすべてのニーズをサポートするように動いています。