ngx-uglifier v1.0.3

ngx-uglifier uglifies your angular library, meaning it shortens class member names to be of a single character. It utilizes terser to do the uglification, terser is used by the angular compiler to minify the code in build time, so it is already installed by angular.

The uglification also reduces your library bundle size since it shortens class member names.

Uglifying is not the same as obfuscating which mangles the code. This package only shortens the names of classes/methods/variables.

There are 2 stages for uglifying the code: 1. building your library as usual, this will produce a transpiled .js files. 2. uglifying the transpiled files.

When building an angular library, the following names need to remain unchanged, all others can be shortened:

• public exports, those are usually class names
• public class methods/variables which should be accessed from outside the class
• public interfaces AND their properties

All class members declared as protected/private can be uglified. However, since the uglification works on .js file there can be no distinction between public and protected/private members. In order to provide this distinction we need to plan our code for it. My suggestion is to prefix the protected/private members with an underscore or something alike, you can then pass an option to terser telling it to uglify only members which start with underscore.

Here is a sample code for a directive having private variables/methods prefixed with underscore. In this sample the only names that will be preserved after uglification will be the class name MyLibDirective and the public method isEmbed.

@Directive({ selector: '[myLib]' })
export class MyLibDirective {
  private _options;

  constructor(private viewContainer: ViewContainerRef) {
	  this._initOptions();
  }

  private _initOptions() {
	return this._options = { isEmbed: true };
  }

  public isEmbed() {
	return this._options.isEmbed;
  }
}

Installation

npm install -D ngx-uglifier

Uglification

Uglification is made by running a script which processes the built code. The script will contain a config object with the input/output folder names.

const NgxUglifier = require('ngx-uglifier');

const config = { projectName: 'my-lib' }
const ngxUglifier = new NgxUglifier(config);
ngxUglifier.init().then();

config object

The config object mainly contains folder names and optionally some uglification options. The interface name is NgxUglifierConfig.

uglifyOptions object

The uglifyOptions object contain properties which will be used by terser to uglify the code. This object is optional, the default values are optimized for es6 apps. The interface name is NgxUglifierOptions.