角2とタイプスクリプト。 HTMLテンプレートをコンパイルするには？

Question

私はファイル*.tsを持っていて、tscを使って*.jsにコンパイルする方法を理解するのは簡単です。しかし、質問は私が*.tsファイルで使用するHTMLテンプレートをコンパイルする方法ですか？例えば

それはHTMLファイルにコンパイルされ、起動された後、このコードが表示されます：

<script id="__bs_script__">//<![CDATA[ 
    document.write("<script async src='/browser-sync/browser-sync-client.2.14.0.js'><\/script>".replace("HOST", location.hostname)); 
//]]></script> 

Answer 1

あなたのTSをコンパイルする前にHTMLをインポートするには、ビルドシステムのいくつかの並べ替えが必要になります。 1つの方法は、これを達成するためにwebpackやsystemjsのようなツールを使うことです。

あなたはWebPACKの

使用している場合は、文字列としてHTMLファイルをインポートして、コンポーネントのテンプレートにそれらをインライン化するraw-loaderを使用することができます。あなたが使用できるテンプレートで次に

module: { 
    loaders: [ 
     { 
     test: /\.html$/, 
     loader: 'raw-loader', 
     include: /src/, 
     exclude: [helpers.root('src/index.html')] 
     } 
    ] 
} 

、：：ここで

は、例えばWebPACKのコンフィグ（だ

template: require('./template.name.html') 

あなたがここに生ローダーについての詳細を読むことができます：https://github.com/webpack/raw-loader

をした後ローダーが実行されてhtmlがインポートされ、テンプレートがトランスポートされたときにインラインでTS内に挿入されます。たとえば、template: '<div>your imported html</div>

あなたはSystemJs

使用している場合は、テキストのプラグインを使用することができます。使用して設定に追加します： https://github.com/systemjs/plugin-text