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

Question

I have a hybrid project with both AngularJS 1.x and Angular 6 code. I'm trying to bundle all the .html templates to a js file so that all the following AngularJS calls that are done in *.js files -

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

        ...
}}]);

will work.

I tried using ngtemplate-loader with the following rule:

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

and no cigar.. as I understand it, it'll only work for require(..) calls and not for plain string urls.. I didn't find any solution that works with js files that don't support require .

Thanks

Answer 1

you can import the html file in your js file. and then try to use the reference.

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

        ...
}}]);

and instead of templateUrl use template only.

Answer 2

what solved the issue for me was to convert all my states from

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

to

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

while using the following webpack rule

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

and it worked! I didn't have to change any other templateUrl: ... statements throughout the code :)