使用 webpack 在另一个中包含一个角度模板答案

【问题标题】：Include an angular template in another using webpack使用 webpack 在另一个中包含一个角度模板
【发布时间】：2015-08-16 18:54:24
【问题描述】：

我在使用 Angular 和 webpack 时遇到问题。我的项目由多个带有控制器的视图组成。

例如，我有一个视图userSummary.tmpl.html，它加载了所有用户的列表。我想在另一个显示所有用户的groupSummary.tmpl.html 中重用这个模板。

我不能使用 ng-include，因为我的所有视图都包含在 bundle.js 中，仅此而已。我想使用 WebPack 将我的视图直接包含在另一个视图中。

这可能吗？

【问题讨论】：

既然可以进行路由和嵌套视图，为什么还要使用 webpack？看看这里github.com/angular-ui/ui-router
谢谢@Mikey。我使用 ui-router 插件，但在我的情况下似乎不起作用。我已经在我的状态下使用了模板，但无法在 html 中添加带有 ui-view 的视图。
奇数。每次都为我工作。你想要的是嵌套视图还是不是？
你可以在使用ngtemplate-loader或ng-cache-loader之类的时候使用ng-include，我已经解决了
Webpack: using require for ng-include的可能重复

标签： javascript angularjs webpack

【解决方案1】：

更新了配置 Webpack 3

  {
    test: /\.html$/,
    exclude: /node_modules/,
    use: [
      { loader: 'ngtemplate-loader?relativeTo=' + __dirname + '/app' },
      { loader: 'html-loader' }
    ]
  },

然后可以通过在组件 js 文件中使用 require 来导入 html。

require('../../templates/path/to/template.html');

在你的组件 html 文件中

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

【讨论】：

【解决方案2】：

在 Webpack.config 文件中，您可以像下面这样添加主 html

   plugins: [ 
    new HtmlWebpackPlugin({
    template: 'index.html'
    }),
    new ExtractTextPlugin('bundle.css')
    ],

在 package.json 中包含 html-loader 并在 config 块中单独使用以下方法就足够了。

$stateProvider.state('app', {
    url: '/app',
    template: require('html-loader!root/app/Common/templates/role.html'),
    controller: 'roleController'
})

所以所有的部分都将被捆绑在 bundle.js 本身中。不需要在 webpack-config 中添加加载器

【讨论】：

请不要在多个问题上发布identical answers。发布一个好的答案，然后投票/标记以关闭其他问题作为重复问题。如果问题不是重复的，调整您对该问题的回答。

【解决方案3】：

要启用您必须配置“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>

【讨论】：

有趣，我要试试。谢谢
@DonovanCharpin 如果可行，您可以选择此作为批准的答案。
如果这使用了一个特定的加载器（看起来），最好给这个加载器一个链接（和一个 NPM 名称）......
这是 ngtemplate。 webpack 会自动附加“-loader”来获取 NPM 名称。

【解决方案4】：

在使用ngtemplate-loader 或ng-cache-loader 之类的内容时，您可以使用ng-include。正如您所提到的，这会将其全部捆绑到文件中。

虽然您也可以使用 file-loader 将内容分离到单独的文件中，这将克隆捆绑目录中的文件并为您提供每个 HTML 文件的路径，并且在 angular 中的工作方式相同。

【讨论】：

我正在使用 ngtemplate-loader 但它根本没有触发 ng-include
你必须在角度组件之外使用它，否则它不会包含。这真的值得投反对票吗？