Custom webpack loaders not applying in unit tests

[vadjs]

Describe the bug Adding custom webpack loaders works perfect with ng serve and ng build but it doesn't work with ng test.

To Reproduce Steps to reproduce the behavior:

1. Add extra webpack config for Pug templates:

   module.exports = {module: {rules: [{test: /.pug$/, use: [{ loader: 'apply-loader' },{ loader: 'pug-loader' }]}]}};

2. Create pug template. It works good with ng serve
3. Run ng test. You will see just a plain text instead of components.

OR (preferred way) A link to a repository with minimal reproduction: https://github.com/vadjs/custom-loaders-bug

Expected behavior Custom loaders should work properly during unit tests run.

Builder:

• @angular-builders/custom-webpack
• 8.2.0

Libraries

• angular-devkit/build-angular: 8.2.0

Additional context This problem appeared in Angular 8. Looks like Angular team dedicated unit tests config to a different place. That's not only @angular-builders/custom-webpack bug because replacing common.js file with webpack config in @angular-devkit/build-angular produces the same bug.

[just-jeb]

Are you using @angular-builders/custom-webpack:karma? Can you provide a minimal reproduction repo please?

[vadjs]

Yes, i using it. Also i attached minimal reproduction repo previously. I can repeat link: https://github.com/vadjs/custom-loaders-bug

[just-jeb]

Putting the following code here:

    console.log((await webpackConfigurationTransformer(config[0])).module.rules.find(({test}) => String(test) === String(/.pug$/)));

Prints this:

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

So I doubt the issue is with the builder (because clearly it merges the configuration and passes it on).
You say it worked for you when you used Angular 7 and stopped working when you moved to Angular 8?

[just-jeb]

The config that is passed to Karma server contains your loaders so the problem is probably somewhere in Karma. Trying to check with Angular team what's the possible problem. Not a bug of custom-webpack though.

[just-jeb]

Must be the direct template loading option (which is enabled by default). Try to disable it.

[vadjs]

Thank you. Looks like it was a true reason of this bug.

The exact config that adds pug support and fixes this bug below:

const AngularCompilerPlugin = require('@ngtools/webpack');

module.exports = (config) => {
  config.module.rules.push(
    {
      test: /.pug$/,
      use: [
        { loader: 'apply-loader' },
        { loader: 'pug-loader' }
      ]
    }
  );

  const index = config.plugins.findIndex(p => p instanceof AngularCompilerPlugin.AngularCompilerPlugin);
  const oldOptions = config.plugins[index]._options;
  oldOptions.directTemplateLoading = false;
  config.plugins.splice(index);
  config.plugins.push(new AngularCompilerPlugin.AngularCompilerPlugin(oldOptions));
  return config;
};

[kmaraz]

An update for the latest Angular 11.1.0 version: https://github.com/just-jeb/angular-builders/issues/842#issuecomment-764573237