[英]What's the best way to include templates with AngularJS + Webpack2?
EDIT: I haven't found a way to import templates with an import
statement instead of require
, but I have discovered that I can simplify my configuration. 编辑:我还没有找到一种使用import
语句而不是require
导入模板的方法,但是我发现我可以简化配置。
In the webpack config, use html-loader
instead of ngtemplate-loader
for /\\.html$/
. 在webpack配置中,将html-loader
代替ngtemplate-loader
用于/\\.html$/
。 Then, in the component, require the template at the top of the file like we did in the original post, but change "templateUrl" to "template" in the component definition. 然后,在组件中,像在原始文章中一样,在文件顶部要求模板, 但是在组件定义中将“ templateUrl”更改为“ template”。 Webpack will do the rest for you. Webpack将为您完成其余的工作。
const template = require('./component.html');
class Example(){
...
}
export const component = {
bindings: {},
controller: Example,
template: template
};
original post: 原始帖子:
I have a working solution with ngtemplate-loader : 我有ngtemplate-loader一个可行的解决方案:
const template = require('./component.html');
import ExampleService from './example.service';
class Example() {
constructor(private exampleService: ExampleService) {
}
...
}
export const component = {
bindings: {},
controller: Example,
templateUrl: template
};
But I'm afraid my colleagues will object to the require
syntax. 但恐怕我的同事会反对require
语法。 You see, I am migrating our app from Grunt to Webpack2, and the current app only uses import foo from './bar'
syntax. 您会看到,我正在将我们的应用程序从Grunt迁移到Webpack2,并且当前应用程序仅使用import foo from './bar'
语法的import foo from './bar'
。
We also don't import templates in the javascript files in our current build; 我们也不会在当前版本的javascript文件中导入模板; we use a callback in the templateUrl to return a string. 我们在templateUrl中使用回调函数返回一个字符串。
import ExampleService from './example.service';
class Example() {
constructor(private exampleService: ExampleService) {
}
...
}
export const component = {
bindings: {},
controller: Example,
templateUrl: ['constantsFactory', function(constantsFactory) {
return `${constantsFactory.path}/component.html`;
}]
};
Is there a webpack loader that can populate $templateCache without require
? 是否有一个Webpack加载程序可以无需require
而填充$ templateCache?
If not, is there a way to import templates in Typescript with import
syntax? 如果没有,是否可以使用import
语法在Typescript中导入模板?
There is not a way to add templates to the $templateCache by using import
syntax, but you can add templates to the cache with 'require' syntax. 没有使用import
语法将模板添加到$ templateCache的方法,但是您可以使用'require'语法将模板添加到缓存。
angular1-templateurl-loader angular1-templateurl装载机
Best loader I could find right now. 我现在可以找到的最佳装载机。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.