角度2つの独立したJavaScriptファイルとtypescriptですファイル

Question

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

クイックスタート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 

Answer 1

次のようになります。

<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>