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

Question

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

在 webpack 配置中，/\.html$/ 使用 html-loader 而不是 ngtemplate-loader。然后，在组件中，像我们在原始 post、 中所做的那样在文件顶部 require 模板，但在组件定义中将 "templateUrl" 更改为 "template"。 Webpack 会为您完成剩下的工作。

const template = require('./component.html');

class Example(){
    ...    
}

export const component = {
    bindings: {},
    controller: Example,
    template: template
};

原post:

我有一个可行的解决方案 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
};

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

我们也不在当前版本的 javascript 文件中导入模板；我们在 templateUrl 中使用回调 return 一个字符串。

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

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

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

What's the best way to include templates with AngularJS + Webpack2?

javascript

templates

angularjs

typescript

webpack-2