How to configure terserplugin to not mangle classnames

Question

Classnames are mangled during minification, but that should not be done

I tried setting the reserved property when mangling as described here https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions. Unfortunately that doesn't work for me.

I have a repo on bitbucket that contains the problem, https://bitbucket.org/JohanBeumer/angular-ivy-aot/src/master/.

I noticed I made a mistake by not commiting the latest sources to bitbucket. Sorry for that, I updated the repo.

De custom webpack config I use in that repo is as follows :

module.exports = {
    optimization: {
        minimizer: [
            new TerserPlugin({
                terserOptions: {
                    // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
                    compress: false,
                    keep_fnames: true,
                    keep_classnames: true,
                    mangle: {
                        keep_fnames: true,
                        keep_classnames: true,
                        properties: {
                            reserved: ['Foo', 'BaseModel']
                        }
                    }
                }
            })
        ]
    }
};

I expect the title of the screen to show the name of the class, which is 'Foo'.

I build the app using the command : ng build --prod --aot

The actual question I have is, how can I prevent webpack minify from mangling the classname?

Thanks for the response Tony Ngo. I added keep_fnames as you suggested but unfortunately that doesn't solve the problem. Now I get the the following error in the console :

Answer 1

Just to finish up this question. I ended up creating an issue with Webpack at first and later on with Angular-cli.

Webpack issue

Angular-cli issue

The takeaway is, you can configure terserPlugin, but Angular ignores that configuration when it comes to mangling.

To save yourself time, instead of dynamically trying to get the classname add a property with that same name and use that.