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