在打字稿中导入html模板 [英] import html template in typescript
问题描述
我正在尝试import
我的html模板,以便Webpack能够识别它们并在构建时包含它们. (webpack -d
)
I'm trying to import
my html template so that webpack will recognize them and include them when I build. (webpack -d
)
根据此GitHub问题我应该这样做
declare module '*.html' {
const _: string;
export default _;
}
然后import template from './myTemplate.html';
应该可以工作.
但是并不能完全解决问题.
But it doesn't quite do the trick.
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模块更改为
However if I change my *.html module to
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问题中的其他人似乎都可以使它正常工作.
It works, but why doesn't import template from './myTemplate.html';
work? What am I doing wrong as the others in the GitHub issue seemed to get it to work like that.
推荐答案
您没有做错任何事情,要使用import template from './myTemplate.html';
,您需要使用export default
语法.
You are not doing anything wrong, in order to use import template from './myTemplate.html';
you need to use export default
syntax.
Because of the fact that webpack is the one that handles html
imports it doesn't do export default by default.
但是您可以配置您的html-loader
以使用导出默认设置
But you can configure your html-loader
to use export default.
这篇关于在打字稿中导入html模板的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!