angularjs - 在 typescript 中导入html模板

Question

我正在尝试导入 我的 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

然而这“有效”

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 使用导出默认值。