Angular-cli : How to ignore class names from being minified

adding to yantrab's answer for angular 8.2+ using angular-builders

in angular.json

builder: @angular-builders/custom-webpack:browser

options:

    "customWebpackConfig": {
      "path": "./extra-webpack.config.js",
      "mergeStrategies": {
        "externals": "replace"
      }
    },

in extra-webpack.config.js:

module.exports = config => {
  config.optimization.minimizer.filter (({constructor: {name}}) => name === 'TerserPlugin')
  .forEach (terser => {
    terser.options.terserOptions.keep_classnames = true;
  });

  return config;
};

then either target es5 or es2015 with differential loading disabled per the browserslist discussed here: https://github.com/just-jeb/angular-builders/issues/144#issuecomment-568890065

Angular cli builder supports NG_BUILD_MANGLE, NG_BUILD_MINIFY, NG_BUILD_BEAUTIFY node environment params (checked in version 8).

You can set them when running npm script in following way: env NG_BUILD_MANGLE=false NG_BUILD_MINIFY=false NG_BUILD_BEAUTIFY=true ng build --prod

This will result in unminified output, yet tree shaking and other optimizations will still be applied (compared to just turning off optimization).