TypeScriptを使用してHTMLファイルを文字列としてインポートすることはできますか？

Question

タイトルとしてもできるかと思います。

たとえば、Angular2プロジェクトで作業しており、httpリクエストが少なくなるようにテンプレートを外部URLとして設定しないようにしたいとします。それでも、十分に大きいか、デザイナーが開発者とは異なるファイルで作業してほしいので、コンポーネント内にすべての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テンプレートを作成するデザイナー/ devにとっては悪いことです。私が達成しようとしている何

はの.htmlファイルやない.TSをインポートする方法を見つけることです。

したがって、.htmlファイルをTypeScriptの文字列としてインポートすることは可能ですか？

import "template.html"; 

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

これはあなたのコンポーネントの依存関係リストに「template.html」が含まれますと、あなたはあなたのビルダー（実際には、それが持つ、より理にかなっているとの同梱することができます：

は

Answer 1

あなたは今、これを行うことができますamd）

しかし、あなたが示唆したように、webpackを使用することをお勧めします。

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

などのようにそれを使用します：

import * as template from "template.html"; 

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

Answer 2

は今、あなたがそうのようなhtmlモジュールを宣言することができ、このstarter pack

---

UPDATEを見てみましょう@ Veikedoのalmより上の答えオスト作品。 * 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'. 

（活字体2.3.3を使用して書いている時点で、）修正import文は次のとおりです：コンパイラエラーはこのようになります

import template from "template.html"; 

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