Можно ли импортировать HTML файл в виде строки с помощью TypeScript?

Интересно, можно ли сделать так, как сказано в названии.

Например, скажем, мы работаем над проектом Angular2, и мы хотим избежать установки шаблона в качестве внешнего URL-адреса, чтобы иметь меньше HTTP-запросов. Тем не менее мы не хотим писать весь HTML-код в компоненте, потому что, возможно, он достаточно большой или мы хотим, чтобы дизайнеры работали в разных файлах, чем devs.

Итак, вот первое решение:

Файл 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.

. Можно ли импортировать файл .html в виде строки в TypeScript?

Ответ 1

Вы можете сделать это сейчас:

import "template.html";

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

это будет включать "template.html" в список зависимостей вашего компонента, а затем вы можете связать его с вашим создателем (на самом деле это имеет смысл с помощью amd)

Однако, как вам было предложено, лучше использовать webpack.

Взгляните на этот стартовый пакет

UPDATE теперь вы можете объявить модуль html следующим образом:

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

и используйте его так:

import * as template from "template.html";

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

Ответ 2

@Ответ на 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
})