Webpack:使用require for ng-include

Question

我是webpack的新手,现在我在我的一个角度项目中第一次使用它.

我想在我的html文件中使用require函数,以便需要ng-include的模板,如下所示:

<div ng-include="require(./my-template.html)"></div>

我知道有像ng-cache和ngtemplate这样的加载器,但它们并不像我需要的那样工作.有了它们,我必须首先在js中要求模板,而不是在我的html文件中使用模板名称.

怎么做到这一点？

Answer 1

您可以使用HTML加载器和angular $ templateCache服务

angular
    .module('template',[])
    .run(['$templateCache', function($templateCache) {
        var url = 'views/common/navigation.html';
        $templateCache.put(url, require(url));
    }]);

webpack loader配置:

{
    test: /\.html$/,
    loader: 'html',
    query: {
        root:sourceRoot
    }
}

Answer 2

另一种方法是转换my-template.html为角度组件:假设您使用html-loader加载HTML文件(loaders: {test: /\.html/, loader: 'html'}),myTemplate在模块JavaScript文件中定义一个组件:

import myTemplate from './my-template.html';
angular.module(...)
  .component('myTemplate', {template: myTemplate})

之后使用它:

<my-template></my-template>

Answer 3

您可以在npm上使用webpack-required-loader.

在你的app js或模块js中添加评论:

//@require "./**/*.html" 

在您的模板中,您可以使用

<div ng-include="'my-template.html'"></div>

Ngtemplate将正常工作.Ng-cache也可以.

另请注意,ng-include指令中不需要相对路径,因为通过//@require在条目文件的头部添加命令可以解决这个问题.

最后,请注意,您必须使用双引号和单引号才能使ng-include工作.所以,你要做"'template-name.html'",不"template-name.html",或'template-name.html'.

如何配置加载器