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


    "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:

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).