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。一种方法是使用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')

您可以在此处阅读有关raw-loader的更多信息：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

Angular 2和TypeScript。如何编译HTML模板？

1 个答案: