Webpack：使用require加载ng-include

Question

我对webpack还很陌生，现在我第一次在我的angular项目中使用它。

我想在我的html文件中使用require函数来引入一个ng-include的模板，代码如下:

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

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

如何实现这一点？

- Sebastian

---

创建一个指令是最简单的方法。然后在指令中可以添加要求 - 否则可以寻找一个加载器。 - Callum Linington

http://stackoverflow.com/questions/30605266/include-an-angular-template-in-another-using-webpack - Callum Linington

Answer 1

另一种方法是将 my-template.html 转换成一个Angular组件： 假设您使用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>

- simon04

---

谢谢您的建议！在我看来，对于我的使用情况来说，比其他答案更简单 :) - troig

这是一个很好的回答，但它并没有回答问题：ng-include条件怎么样？ - SchemeSonic

Answer 2

дҪ еҸҜд»ҘдҪҝз”Ё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
    }
}

- shengbeiniao

---

谢谢，它可行而且简单，没有额外的加载器（好吧，Html加载器是相当标准的，我的意思是）。值得一提的是，根据 https://github.com/preboot/angular-webpack 中找到的配置，它也可以使用raw loader工作。如果包含片段引用图像，则需要测试其他配置（dev / prod）。 - PhiLho

仅供参考，我在 https://github.com/PhiLhoSoft/Angular-Webpack-Playground 上创建了一个变体项目，其中我添加了像您展示的 ng-include。 - PhiLho

Answer 3

您可以在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'。 如何配置加载器

- shanhaichik

---

@ave，如果您有任何问题或建议，请在此处留言，我会尽力回答。 - shanhaichik

@MojtabaPourmirzaei，你好。请添加链接，如何配置加载器 :) - shanhaichik

似乎已经过时，无法处理新的webpack错误，例如：必须使用require-loader而不仅仅是require。 - davidbuttar

嗨，@davidbuttar！我不明白你的意思。 - shanhaichik

在你的文档中，你说像 'loader: "ng-cache"' 这样的话，但是当我运行它时，它会显示类似于“破坏性更改，你必须包含-loader”，例如 'loader: "ng-cache-loader"'，所以假设这个帮助程序已经过时了。我现在避免使用 ng-include，所以不需要这个，但是想提一下。 - davidbuttar

Answer 4

我已经在https://stackoverflow.com/a/34815472/833093上发布了这个问题：

要启用，您必须配置“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},
        ],
    },
    ...
}

那么在您的代码中，只需进行一个副作用的 require：

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

然后你可以加载HTML：

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

- Thomas Grainger