使用 Webpack 4 捆绑 Angular.JS 模板答案

【问题标题】：Bundle Angular.JS templates with Webpack 4使用 Webpack 4 捆绑 Angular.JS 模板
【发布时间】：2018-10-22 08:43:37
【问题描述】：

我有一个包含 AngularJS 1.x 和 Angular 6 代码的混合项目。我正在尝试将所有 .html 模板捆绑到一个 js 文件中，以便在 *.js 文件中完成以下所有 AngularJS 调用-

.directive('myDirective', [
    function () {
      return {
        restrict: 'E',
        templateUrl: '/components/.../derp/derp.html',

        ...
}}]);

会起作用的。

我尝试通过以下规则使用ngtemplate-loader：

{
    test: /\/(components|views)\/.*?\.html$/,
    use: [
      {
        loader: 'ngtemplate-loader'
      },
      {
        loader: 'html-loader'
      }
    ]
}

没有雪茄……据我了解，它仅适用于require(..) 调用，不适用于纯字符串网址。我没有找到任何适用于不支持 require 的 js 文件的解决方案。

谢谢

【问题讨论】：

标签： angularjs webpack webpack-4

【解决方案1】：

你可以在你的js文件中导入html文件。然后尝试使用引用。

 var template = require('/components/.../derp/derp.html')   
 app.directive('myDirective', [
    function () {
      return {
        restrict: 'E',
        template: template,

        ...
}}]);

仅使用 template 而不是 templateUrl。

【讨论】：

【解决方案2】：

为我解决问题的方法是将我的所有状态从

.state('...', {
    url: '...'
    templateUrl: './a/b/c.html',
    controller: '...'
})

到

.state('...', {
    url: '...'
    templateUrl: require('./a/b/c.html'),
    controller: '...'
})

同时使用以下 webpack 规则

{
    test: /\.html$/,
    use: [
      {
        loader: 'ngtemplate-loader',
        options: {
          relativeTo: path.resolve(__dirname, "app")
        }
      },
      {
        loader: 'html-loader'
      }
    ],
    exclude: [
      /index\.html$/
    ]
}

它成功了！我不必在整个代码中更改任何其他 templateUrl: ... 语句:)

【讨论】：