使用 AngularJS + Webpack2 包含模板的最佳方法是什么？

Question

>编辑：我还没有找到使用import语句而不是require导入模板的方法，但我发现我可以简化我的配置。

在 webpack 配置中，使用html-loader而不是ngtemplate-loader来表示/.html$/。然后，在组件中，像我们在原始帖子中所做的那样，要求在文件顶部使用模板，但在组件定义中将"templateUrl"更改为"模板"。Webpack将为您完成其余的工作。

const template = require('./component.html');
class Example(){
...    
}
export const component = {
bindings: {},
controller: Example,
template: template
};

---

原文：

我有一个使用 ng模板加载器的工作解决方案：

const template = require('./component.html');
import ExampleService from './example.service';
class Example() {
constructor(private exampleService: ExampleService) {
}
...
}
export const component = {
bindings: {},
controller: Example,
templateUrl: template
};

但我担心我的同事会反对require语法。你看，我正在将我们的应用程序从 Grunt 迁移到 Webpack2，而当前的应用程序仅使用import foo from './bar'语法。

我们也不会在当前构建的javascript文件中导入模板;我们在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`;
}]
};

有没有可以在没有require的情况下填充$templateCache的 webpack 加载器？

如果没有，有没有办法使用import语法在 Typescript 中导入模板？

Answer 1

没有办法使用import语法将模板添加到$templateCache，但您可以使用"require"语法将模板添加到缓存中。

Angular1-templateurl-loader

我现在能找到的最好的装载机。