使用 Webpack 4 捆绑 Angular.JS 个模板

Question

我有一个包含 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(..) 调用而不适用于纯字符串 url.. 我没有找到任何适用于不支持 require.

的 js 文件的解决方案

谢谢

Answer 1

您可以在您的 js 文件中导入 html 文件。然后尝试使用参考。

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

        ...
}}]);

而不是 templateUrl 仅使用 template。

Answer 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: ... 语句:)

使用 Webpack 4 捆绑 Angular.JS 个模板

Bundle Angular.JS templates with Webpack 4

angularjs

webpack

webpack-4