Угловые 2 и TypeScript. Как скомпилировать HTML-шаблоны?

Question

У меня есть файлы *.ts, и это легко понять, как скомпилировать в *.js с помощью tsc. Но вопрос в том, как скомпилировать HTML-шаблоны, которые я использую в файлах *.ts?

Например, этот код появляется после того, как он собран и запущен в 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

Вам нужна какая-то система сборки для импорта HTML до компиляции TS. Один из способов - использовать для этого такие инструменты, как webpack или systemjs.

Если вы используете Webpack

Вы можете использовать raw-loader импортировать HTML файлы в виде строки и встраивать их в шаблон вашего компонента.

Вот пример Webpack конфигурации (:

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

Затем в шаблоне вы можете использовать:

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

Вы можете прочитать больше о сырой погрузчиком здесь: https://github.com/webpack/raw-loader

После загрузчик запускает его, будет импортировать html, и ваш шаблон будет вставлен внутри TS, когда он будет переполнен. Например, template: '<div>your imported html</div>

Если вы используете SystemJs

Вы можете использовать текстовый плагин. Добавьте его в конфигурации с помощью:

System.config({ 
    map: { 
    text: 'path/to/text.js' 
    } 
}); 

Затем импортировать и встраивать свой HTML в шаблон вашего компонента с помощью:

template: require('./template.html!text'); 

Вы можете прочитать немного больше о текстовом плагине здесь: https://github.com/systemjs/plugin-text