Webpack：对 ng-include 使用 require

Question

我是 webpack 的新手，现在我是第一次在我的 angular 项目中使用它。

我想在我的 html 文件中使用 require 函数来要求 ng-include 的模板，如下所示：

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

我知道有像 ng-cache 和 ngtemplate 这样的加载器，但它们不能按我需要的方式工作。有了它们，我必须首先在 js 中要求模板，然后在我的 html 文件中使用模板名称。

如何实现？

Answer 1

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

在您的应用程序 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'。

How config loaders

Answer 2

我已经在上发布了这个但是：

要启用您必须配置 "relativeTo" 参数，否则您的模板部分将加载到“/home/username/path/to/project/path/to/template/”（检查您的 bundle.js 您可能在你的项目）

var ngTemplateLoader = (
    'ngtemplate?relativeTo=' + path.resolve(__dirname, './src/') +
    '!html'
);

module.exports = {
    ...
    module: {
        loaders: [
            {test: /\.html$/, loader: ngTemplateLoader},
        ],
    },
    ...
}

然后在你的代码中，做一个side-effect只需要：

// src/webapp/admin/js/foo.js
require('../../templates/path/to/template.html');

然后你可以载入html:

<div ng-include src="'/webapp/templates/path/to/template.html'"</div>

Answer 3

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

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

webpack 加载器配置：

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

Answer 4

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

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

之后使用：

<my-template></my-template>

Webpack：对 ng-include 使用 require

Webpack: using require for ng-include

javascript

angularjs

angularjs-ng-include

webpack