Связывайте шаблоны Angular.JS с Webpack 4

Question

У меня есть гибридный проект с кодом AngularJS 1.x и Angular 6.Я пытаюсь связать все шаблоны .html в файл js, чтобы все следующие вызовы AngularJS, которые выполняются в файлах * .js -

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

        ...
}}]);

, работали.

Iпопытался использовать ngtemplate-loader со следующим правилом:

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

и без сигары .. насколько я понимаю, это будет работать только для вызовов require(..), а не для простых строковых URL-адресов .. Я не сделал 'Не найти решения, которое работает с файлами js, которые не поддерживают require.

Спасибо

Answer 1

что решило проблему для меня, так это преобразовать все мои состояния из

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

в

.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$/
    ]
}

и это сработало!Мне не нужно было менять какие-либо другие операторы templateUrl: ... по всему коду:)

Answer 2

вы можете импортировать html-файл в ваш js-файл.и затем попытайтесь использовать ссылку.

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

        ...
}}]);

и вместо templateUrl используйте только template.