在打字稿中导入html模板

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

根据这个 GitHub 问题 https://github.com/Microsoft/TypeScript/issues/2709我应该这样做

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

Then 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'; work? 我究竟做错了什么正如 GitHub 问题中的其他人似乎让它像这样工作一样。

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

因为 webpack 是处理这个问题的html导入它不做 https://github.com/webpack-contrib/html-loader/blob/master/index.js#L137-L143默认导出。

但是你可以配置 https://github.com/webpack-contrib/html-loader#export-formats your html-loader使用导出默认值。