2016-05-02 26 views
1

後、マイプロジェクトのフォルダ構造がそう.TSファイルと.jsファイルを分離するためにhttps://angular.io/docs/ts/latest/tutorial/toh-pt1.html角度2つの独立したJavaScriptファイルとtypescriptですファイル

クイックスタートToHが同じであるSystem.configを()調整し、私はに追加tsconfig.jsonに"outDir": "dist"と入力します。 tscはすべての.jsファイルと.mapファイルをdistフォルダにコンパイルします。ここまでは順調ですね。 distフォルダはappフォルダと平行です。

{ 
    "compilerOptions": { 
    "target": "es5", 
    "module": "system", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "removeComments": false, 
    "noImplicitAny": true, 
    "outDir": "dist", 
    "suppressImplicitAnyIndexErrors":true 
    }, 
    "exclude": [ 
    "node_modules", 
    "typings/main", 
    "typings/main.d.ts" 
    ] 
} 

次私は今

<script> 
    System.config({ 
    packages: {   
     app: { 
     format: 'register', 
     defaultExtension: 'js' 
     }, 
     services: {defaultExtension: 'js'} 
    } 
    }); 
    //System.import('app/main') 
    System.import('./dist/app/main') 
     .then(null, console.error.bind(console)); 
</script> 

NPM開始後、ブラウザがどのようにシステムのインポート機能を見つけてみましょうことができます私に

system.src.js:1154 GET http://localhost:3000/dist/app/main 404 (Not Found) 

を与えたのindex.htmlにsystem.importを変更main.js?

フォルダ構造ルートフォルダにメインのHTMLファイルを保存したい場合、私はmapブロックを活用するでしょう。この

root 
    |--app   // all .ts files are here 
    |--dist 
     |--app  // all .js and .map files are here 
+1

あなたは、インデックスを移動しませんでした.htmlをdistに挿入しますか?正しく、それはそこにあるはずです – Dinistro

+0

しました。それはdistフォルダ内から動作します(そして、私はそれが生産用のdistフォルダの目的だと思います)。しかし、私はタイプスクリプトでデバッグする能力を失った。しかし、言及いただきありがとうございます。 – Shawn

答えて

3

次のようになります。

<script> 
    System.config({ 
    map: { 
     app: 'dist/app' // <----- 
    }, 
    packages: {   
     app: { 
     format: 'register', 
     defaultExtension: 'js' 
     }, 
     services: {defaultExtension: 'js'} 
    } 
    }); 
    System.import('app/main') 
     .then(null, console.error.bind(console)); 
</script> 
+0

ありがとうございました。それがまさに私が必要としているものです。そのような設定の秘訣を文書化する場所はありますか? – Shawn

+1

あなたは大歓迎です!あなたはこのリンクを見ることができます:https://github.com/systemjs/systemjs/blob/master/docs/config-api.md。 –

関連する問題