Different webpack.config.js files for different configurations not working with v9.2

Hello, attempting to implement your recommended angular.json for different webpack configurations per https://github.com/just-jeb/angular-builders/issues/248#issuecomment-466650709

   "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "outputPath": "dist/electron-angular-native",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.png",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
                "customWebpackConfig": {
                    "path": "./prod-webpack.config.js"
                },
            },
            "development": {
                "customWebpackConfig": {
                    "path": "./dev-webpack.config.js"
                },
            }
          }
        },

Unfortunately, with v9.20 I can’t get the webpack.config.js files to be picked up unless they’re specified within the top-level options.

I can get it running with dev defaults only:

   "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
                "path": "./dev-webpack.config.js"
            },
            "outputPath": "dist/electron-angular-native",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.png",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
                "customWebpackConfig": {
                    "path": "./prod-webpack.config.js"
                },
            },
            "development": {
            }
          }
        },

… but then prod-webpack.config.js is ignored when building with --configuration=production

[kmaraz]

Hi, just an update for those who found this after Angular 11.1.0 release: You will probably need to use AngularWebpackPlugin instead of AngularCompilerPlugin.

For example in my case it looks like this:

import { AngularWebpackPlugin } from '@ngtools/webpack/src/ivy/plugin';

...
  const index = config.plugins?.findIndex((p) => {
    return p instanceof AngularWebpackPlugin;
  });
  if (index) {
    // @ts-expect-error pluginOptions is a private property
    const oldOptions = config.plugins?.[index].pluginOptions;
    oldOptions.directTemplateLoading = false;
    config.plugins?.splice(index);
    config.plugins?.push(new AngularWebpackPlugin(oldOptions));
  }

[DaveA-W]

My problem was that my custom prod-webpack.config.js had module rules to try and transform *.html templates as described in this Medium article.

var path =  require('path');

module.exports = {
  module: {
    rules: [{
      test: /\.html$/,
      use: ['data-cy-loader']
    }]
  },
  resolveLoader: {
    alias: {
      'data-cy-loader': path.join(__dirname, 'data-cy-loader.js')
    }
  }
}

This config file was being loaded correctly.

However, if your production config options specify ahead-of-time aot: true compilation (which most prod configs for Angular 8+ do) then .html templates don’t get processed the same way they do for just-in-time (JIT) builds which is what you may be using for ng serve.

If your issue looks to be related - i.e., your customWebpackConfig is trying to transform .html templates - then this discussion gives some leads that may be worth following up: https://github.com/IAMtheIAM/angular-webpack-nodejs-starter/issues/4