CODEWITHSUNDEEP
angularjswebpackpug-loader
TSW
TSW

Reputation: 61

Webpack does not process pug files from template in controller

I recently updated an AngularJS (v1) project from Webpack v1 to v2 and TypeScript v1 to v2. The project uses pug files for generating the views, and prior to the upgrade there were no problems.

Since the upgrade, pug files that are referred in a controller no longer are processed by Webpack. Pug files specified in any routes are still working fine.

My webpack.common.config.js has pug configured with the pug-loader:

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

An example of a pug file that does not get processed anymore by 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 }
})

I attempted to explicitly refer to the pug-loader by using

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

This matches the example in the pug-loader documentation at the Github pug-loader repository

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

This gives me the error:

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

I have a Github with a small application showing the problem. It's at MyApp Repository. If you build this app, you can see the template pug file referenced in the main.controller.ts aboutPopup() displays the partially processed code. Once built, go to Main and click the About button.

Upvotes: 2

Views: 1134

Answers (1)

TSW
TSW

Reputation: 61

I found a solution through some digging. By switching from pug-loader, which apparently doesn't automatically find pug references inside controllers, to pug-html-loader this was a key step. I had tried this before but just got unprocessed HTML so gave up on it.

Then I found a reference to adding html-loader as a second loader. So now I've changed my config in the rules section to:

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

This let everything process and build fine.

Upvotes: 3

Related Questions