Component name gets minified

I am actually fetching component name for logging purpose. What i noticed is that in dev environment i am able to fetch the component name but in prod environment i don't get the component name, what i understand is that it gets minified and i get one letter or 2 letter name for each component.

So i did a bit of research on this and i found that terser plugin with custom webpack can solve the issue.

So i tried that but still the name does not gets minified.

Code that i tried : Installed custom webpack installed terser plugin

angular.json

"architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./webpack.js"
            },

Webpack.JSON

const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
  optimization: {
    minimize: false,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          ecma: undefined,
          parse: {},
          compress: false,
          mangle: false,
          module: false,
          output: null,
          toplevel: false,
          nameCache: null,
          ie8: false,
          keep_classnames: true,
          keep_fnames: true,
          safari10: false,
        },
      }),
    ],
  },
};

I tried setting minimize : true, keep class names = true, keep_fnames = true and compress = false but that didnt help me. I also tried setting minimize : false with the above mentioned setting but still i don't get the component name. it still gets minified. What is that i am doing wrong?