在打字稿中导入 html 模板

Question

我正在尝试 import 我的 html 模板，以便 webpack 能够识别它们并在我构建时包含它们。 (webpack -d)

根据this GitHub issue我应该这样做

declare module '*.html' {
    const _: string;
    export default _;
}

那么 import template from './myTemplate.html'; 应该可以。

但这并不能完全解决问题。

import template from './myTemplate.html';
console.log(template); // undefined

然而这"works"

import * as template from './myTemplate.html';
console.log(template); // <p>Hello world!</p>

很奇怪。

但是现在这行不通了

$routeProvider.when("/test", {
    template: template, // ERROR! template is typeof(*.html) expected string
    controller: MyController,
    controllerAs: "$ctrl"
});

但是，如果我将我的 *.html 模块更改为

declare module '*.html' {
    const _: string;
    export = _; // changed this
}

我现在可以了

import * as template from './myTemplate.html';

$routeProvider.when("/test", {
    template: template, // Great success!
    controller: MyController,
    controllerAs: "$ctrl"
});

有效，但为什么import template from './myTemplate.html';无效？ 我做错了什么，因为 GitHub 问题中的其他人似乎是这样工作的。

Answer 1

你没有做错任何事，为了使用 import template from './myTemplate.html'; 你需要使用 export default 语法。

因为 webpack 是处理 html 导入它的事实 doesn't do 默认导出。

但您可以 configure 您的 html-loader 使用导出默认值。