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(..)电话，不适用于纯字符串网址。我找不到适用于不支持require的js文件的任何解决方案。

谢谢

Answer 1

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

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

        ...
}}]);

，而不是templateUrl只能使用template。

Answer 2

为我解决的问题是将我的所有州从转换为

reverse.keys.max

到

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

使用以下Webpack规则

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

成功了！我不必在整个代码中更改任何其他{ test: /\.html$/, use: [ { loader: 'ngtemplate-loader', options: { relativeTo: path.resolve(__dirname, "app") } }, { loader: 'html-loader' } ], exclude: [ /index\.html$/ ] }语句：）

将Angular.JS模板与Webpack 4捆绑在一起

2 个答案: