Webpack не обрабатывает файлы pug из шаблона в контроллере

Недавно я обновил проект AngularJS (v1) с Webpack v1 до v2 и TypeScript v1 до v2. В проекте используются pug-файлы для генерации представлений, и до обновления проблем не было.

После обновления файлы pug, на которые ссылается контроллер, больше не обрабатываются Webpack. Файлы Pug, указанные в любых маршрутах, все еще работают нормально.

У моего webpack.common.config.js мопса настроен загрузчик мопсов:

module: {
  rules: [
    {
      test: /\.pug$/,
      use: ['pug-loader']
    },
  ]
}

Пример файла pug, который больше не обрабатывается Webpack.

this.$mdDialog.show({
  clickOutsideToClose: true,
  template: require('../components/ui/client.pug'),
  controller: ['$mdDialog', '$state', '$rootScope', 'clientService', ProfilePopupController],
  controllerAs: 'dm',
  bindToController: true,
  locals: { localData: popupData }
})

Я попытался явно обратиться к загрузчику мопсов, используя

template: require('pug-loader!../components/ui/client.pug');

Это соответствует примеру в документации pug-loader в репозитории Github pug-loader.

template = require("pug-loader!./file.pug");

Это дает мне ошибку:

ERROR in ./~/pug-loader!./src/app/components/ui/client.pug Module build failed: Error: C:\Users\User\git\myapp\node_modules\pug-loader\index.js!C:\git\myapp\src\app\components\ui\client.pug:4:1

У меня есть Github с небольшим приложением, показывающим проблему. Он находится в репозитории MyApp. Если вы создадите это приложение, вы увидите, что файл pug шаблона, указанный в файле main.controller.ts aboutPopup(), отображает частично обработанный код. После создания перейдите на главную и нажмите кнопку «О программе».


webpack angularjs pug-loader
person TSW    schedule 20.03.2017    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Я нашел решение, покопавшись. Ключевым шагом стало переключение с pug-loader, которое, по-видимому, автоматически не находит ссылки на мопсы внутри контроллеров, на pug-html-loader. Я пробовал это раньше, но просто получил необработанный HTML, поэтому отказался от этого.

Потом нашел ссылку на добавление html-loader в качестве второго загрузчика. Итак, теперь я изменил свою конфигурацию в разделе rules на:

{
  test: /\.pug$/,
  use: [
    'html-loader',
    'pug-html-loader'
  ]
}

Это позволяет все обрабатывать и строить нормально.

person TSW    schedule 21.03.2017