Webpack：对 ng-include 使用 require

Posted 2023-02-22

【中文标题】Webpack：对 ng-include 使用 require

【英文标题】：Webpack: using require for ng-include

【发布时间】：2016-01-30 22:08:46

【问题描述】：

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

我想在我的 html 文件中使用 require 函数，以便像这样要求 ng-include 的模板：

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

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

如何做到这一点？

【问题讨论】：

创建指令是最简单的方法。然后您可以在指令中要求 - 否则查找加载程序

***.com/questions/30605266/…

【参考方案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

【讨论】：

你是如何设置装载机的？

@MojtabaPourmirzaei，嗨。添加链接，如何配置加载器:)

似乎已经过时，出现新的 webpack 错误，例如：use must use require-loader not just require.

嗨，@davidbuttar！我不明白你

在你的文档中你会说'loader：'ng-cache''，但是当我运行它时，它会说一些像破坏性改变这样的东西，你必须包括 -loader 例如'loader: "ng-cache-loader"' 所以假设这个助手已经过时了。我现在避免使用 ng-include，所以不需要这个，但我想我提到了。

【参考方案2】：

另一种方法是将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>

【讨论】：

感谢您的建议！ IMO 和我的用例，比其他答案更简单:)

这是一个很好的回应，但它没有回答这个问题：ng-include 条件呢？

【参考方案3】：

您可以使用 HTML loader 和 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
    

【讨论】：

谢谢，它可以工作而且很简单，不需要额外的加载器（我的意思是 html 加载器非常标准）。作为记录，它也适用于原始加载器，根据github.com/preboot/angular-webpack中找到的配置，如果包含的片段引用图像，则待测试（dev / prod）其他配置。

作为记录，我在github.com/PhiLhoSoft/Angular-Webpack-Playground 制作了上述项目的一个变体，我在其中添加了 ng-include，如您所示。

【参考方案4】：

我已经在https://***.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,
        ],
    ,
    ...

然后在你的代码中，做一个副作用只需要：

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

然后就可以加载html了：

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