Not processing pug files referenced in controllers

[focher]

I have a controller in an AngularJS app with a popup dialog that uses a pug file to reference it. The code is:

template: require('./mydialog.pug');

This worked fine with my Webpack 1 and TypeScript 1.8 based app, but we upgraded to Webpack 2 and TypeScript 2.2. This broke the build process for any pug files referenced from inside controllers. Pug files referenced from the router for states were fine.

One fix I tried was to explicitly reference pug-loader from the template line like this:

template: require(pug-loader!./mydialog.pug');`

That gave the error:

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

This only happens when using pug-loader, The fix was to switch to pug-html-loader and then pass the results to html-loader like this:

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

It appears that pug-loader isn't "finding" the pug file references inside of a controllers or service.

I made a simple app to show it at https://github.com/focher/myapp

My StackOverFlow post is at http://stackoverflow.com/questions/42897432/webpack-does-not-process-pug-files-from-template-in-controller/42917364#42917364

[cdiaz]

I have the same problem, did you solve it?

[focher]

No, I never went back to it as I switched to the solution in the second part of my post.