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

问题

For an application we need to keep the classname not minified because we use

var className = myObject.constructor.name;
export class myObject{ ... }

when we run

ng build -- pro

the class name gets minified in a random name.

回答1:

Angular cli uses webpack and uglify internally. One solution would be changing the options in uglify by exporting the webpack configuration. You can see the webpack files by running ng eject, and ng eject --prod

new UglifyJsPlugin({
      "mangle": false,
      "compress": {
        "screw_ie8": true,
        "warnings": false
      },
      "sourceMap": false
    }),

Mangle = false will preserve class names. The lack of options for webpack in angular cli is one big discussion atm.

You can alse set exclusions like this:

mangle: {
    except: ['foozah']
  }

Note: after ejecting you can remove ejected true from angular-cli.json to do it again or serve/build normally.

"project": {
    "name": "test",
    "ejected": true //remove
  },

回答2:

angular 8 using terser.

this is my config for angular builder :

module.exports = cfg => {
    const options = cfg.optimization.minimizer[cfg.optimization.minimizer.length - 1].options.terserOptions;
    options.keep_classnames = true;
    return cfg;
};

and change terget to es6

回答3:

The option in mangle:

"mangle":{
   "keep_names" : true
}

Keeps the class names intact.

回答4:

Building off Andres M's answer, you can disable mangling without ng eject by directly modifying the Angular file that controls the settings for Webpack: node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/common.js

Note that this will be overwritten whenever @angular-devkit/build-angular is updated, and is not supported by Angular or NPM (and may kill your cat/cause a nuclear armageddon, don't say I didn't warn you!)

I disabled mangling entirely by changing uglifyOptions to uglifyOptions: Object.assign(uglifyOptions, {mangle: false}).

For reference, here's the relevant portion from my modified common.js file

...
new UglifyJSPlugin({
  sourceMap: buildOptions.sourceMap,
  parallel: true,
  cache: true,
  uglifyOptions: Object.assign(uglifyOptions, {"mangle": false})
}),
...

来源：https://stackoverflow.com/questions/44160894/angular-cli-how-to-ignore-class-names-from-being-minified