是否可以使用 TypeScript 将 HTML 文件作为字符串导入？答案

【问题标题】：Is it possible to import an HTML file as a string with TypeScript?是否可以使用 TypeScript 将 HTML 文件作为字符串导入？
【发布时间】：2016-08-07 13:59:22
【问题描述】：

不知道能不能像标题所说的那样做。

例如，假设我们正在开发一个 Angular2 项目，并且我们希望避免将模板设置为外部 url 以减少 http 请求。我们仍然不想在组件中编写所有 HTML，因为它可能足够大，或者我们希望设计人员在与开发人员不同的文件中工作。

所以这是第一个解决方案：

文件template.html.ts 将文件转换为 .ts 格式如下：

export const htmlTemplate = `
   <h1>My Html</h1>
`;

然后在我的组件中我可以像这样导入它：

import { Component } from 'angular2/core';
import {RouteParams, RouterLink} from 'angular2/router';
import {htmlTemplate} from './template.html';

@Component({
  selector: 'home',
  directives: [RouterLink],
  template:  htmlTemplate,
})

实际上这很有效，但是您正在失去 IDE HTML 智能，因此这对创建 HTML 模板的设计人员/开发人员来说是不利的。

我想要实现的是找到一种方法来导入 .html 文件而不是 .ts。

那么是否可以在 TypeScript 中将 .html 文件作为字符串导入？

【问题讨论】：

我所做的就是将require与webpack一起使用，创建一个html文件，然后使用template: require('component.html')，它将作为字符串导入。
是的，这是一种方法。谢谢你的加入，我也会玩它，我会让你知道我的想法。
虽然不是您正在寻找的解决方案，但我使用 gulp-angular-embed-templates 在构建时将 html 模板嵌入到我的 js 类中
是的，这是事实，我正在寻找一种更“本土”的方式来做到这一点，如果我能这么说，这也是一个学术问题。

标签： javascript html import typescript angular

【解决方案1】：

最简单的答案：

使用：templateUrl

例子：

@Component({
selector: 'home',
directives: [RouterLink],
templateUrl: './template.html',
})

注意：.html 文件必须在同一个组件文件夹中，否则您必须修改路径

【讨论】：

【解决方案2】：

你现在可以这样做了：

import "template.html";

@Component({
  selector: 'home',
  directives: [RouterLink],
  template:  require("template.html"),
})

这会将“template.html”包含到组件的依赖项列表中，然后您可以将其与构建器捆绑在一起（实际上，使用amd 更有意义）

但是，正如您所建议的，最好使用webpack。

看看这个starter pack

更新现在您可以像这样声明html 模块：

declare module "*.html" {
    const content: string;
    export default content;
}

并像这样使用它：

import * as template from "template.html";

@Component({
  selector: 'home',
  directives: [RouterLink],
  template: template
})

【讨论】：

出于某种原因，我认为这是不正确的。 Import & require 文件似乎很奇怪，而且方法不正确。不过还是感谢您的回答，我也会测试一下。
然后我收到“找不到模块 X”错误。这个答案针对的是哪个版本的打字稿？
@BryanRayner 看这里github.com/Microsoft/TypeScript/wiki/…
嗨@Veikedo 使用此结构现在会产生错误：“[ts] 类型的参数 '{ template: typeof ".html"; selector: string; }' is notassignable to parameter '组件'类型。属性'模板'的类型不兼容。类型'typeof“.html”'不可分配给类型'string'。我也尝试过这样的结构：gist.github.com/crooksey/1405d2377edde1c61dc320ad1e147d71 编译，但出现浏览器错误：“错误：没有为组件 AppComponent 指定模板”我错过了什么或犯了明显的错误吗？
@crooksey 我认为您的 *.html 模块声明有问题。你能显示完整的代码吗？

【解决方案3】：

@Veikedo 上面的回答几乎有效；然而* as 部分意味着整个模块被分配给指针template 而我们只想要内容。编译器错误如下所示：

ERROR in /raid/projects/pulse/angular-components/src/lib/card/card.ts (143,12): Argument of type '{ moduleId: string; selector: string; template: typeof '*.html'; encapsulation: ViewEncapsulation...' is not assignable to parameter of type 'Component'.

更正的导入语句（在撰写本文时，使用 TypeScript 2.3.3）如下：

import template from "template.html";

@Component({
  selector: 'home',
  directives: [RouterLink],
  template: template
})

【讨论】：