aigoncharov/angular-builder-custom-terser-options

Angular builder that allows Terser (Uglify) customization

angular-builder-custom-terser-options

Custom Angular builder that allows Terser (Uglify) customization. It's a sub-class of Angular's default builder and it does a very small customization of its logic by extending final webpack config with your custom options for Terser.

This project is not maintained. Try https://github.com/just-jeb/angular-builders instead

• Quick start
• Common use-cases
  • Keep class names

Quick start

1. Install

   npm i -D angular-builder-custom-terser-options
   

   For a builder compatible with Angular 7 run npm i -D angular-builder-custom-terser-options@1

2. Add builders from this package to your angular.json.

   1. Set projects.yourProjectName.architect.build to angular-builder-custom-terser-options:browser-custom-terser
   2. Set projects.yourProjectName.architect.build.configurations.production.optimization to true
   3. Set projects.yourProjectName.architect.build.configurations.production.terserOptions to an object with any minify options supported by Terser. You can find the list of available options here.
   4. Set projects.yourProjectName.architect.serve to angular-builder-custom-terser-options:dev-server-custom-terser

   {
     // ... rest of the default config ,
     "projects": {
       "yourProjectName": {
         "architect": {
           "build": {
             // Set our custom builder here
             "builder": "angular-builder-custom-terser-options:browser-custom-terser",
             "options": {
               // Your default options. Leave it as is
             },
             "configurations": {
               "production": {
                 // Add any options supported by Terser here
                 "terserOptions": {
                   "keep_classnames": true
                 },
                 // Enable optimization to enable Terser itself
                 "optimization": true
               }
             }
           },
           "serve": {
             // Set our custom builder here
             "builder": "angular-builder-custom-terser-options:dev-server-custom-terser"
             // Rest of the config. Leave it as is
           }
         }
       }
     }
   }

Common use-cases

Keep class names

If you set target in your tsconfig.json to es6 or higher, set your terserOptions to { "keep_classnames": true }. If you set target in your tsconfig.json to es5, set your terserOptions to { "keep_fnames": true }.

angular-builder-custom-terser-options's Issues

Exlcude and include filters

Is it possible to set include and exclude filters for Terser?
Looking at the source code it doesn't seem so. If it is feasible I'll do it.

Could not find the implem entation for builder

Neither dev serve or production build works. Angular.json set up according to your example with keep_classnames set to true.

Package.json:

{
"name": "mbnet",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config proxy.config.json",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"readme": "removed dependencies: generator-code yo toastr",
"private": true,
"dependencies": {
"@angular/animations": "9.0.0-next.3",
"@angular/cdk": "^8.1.4",
"@angular/common": "9.0.0-next.3",
"@angular/compiler": "9.0.0-next.3",
"@angular/core": "9.0.0-next.3",
"@angular/forms": "9.0.0-next.3",
"@angular/material": "^8.1.4",
"@angular/platform-browser": "9.0.0-next.3",
"@angular/platform-browser-dynamic": "9.0.0-next.3",
"@angular/router": "9.0.0-next.3",
"@angular/service-worker": "9.0.0-next.3",
"classlist.js": "^1.1.20150312",
"core-js": "^3.1.4",
"oidc-client": "^1.9.0",
"rxjs": "6.5.2",
"tslib": "^1.10.0",
"zone.js": "^0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "0.803.0",
"@angular/cli": "^8.3.0",
"@angular/compiler-cli": "9.0.0-next.3",
"@angular/language-service": "^9.0.0-next.3",
"@types/jasmine": "^3.4.0",
"@types/jasminewd2": "~2.0.6",
"@types/node": "^12.7.2",
"angular-builder-custom-terser-options": "^1.0.1",
"codelyzer": "^5.1.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.2.0",
"karma-chrome-launcher": "^3.1.0",
"karma-cli": "~2.0.0",
"karma-coverage-istanbul-reporter": "^2.1.0",
"karma-jasmine": "^2.0.1",
"karma-jasmine-html-reporter": "^1.4.2",
"protractor": "^5.4.2",
"rxjs-tslint": "^0.1.7",
"ts-node": "^8.3.0",
"tslint": "^5.19.0",
"typescript": "3.5.3"
},
"browserslist": [
"> 0.5%",
"last 3 versions",
"not dead",
"IE 11"
]
}

Support for Angular 8

In Angular 8, there were some changes in the builder API and it's no longer compatible with the new version besides package.json version requirements.

Error:

Could not find the implementation for builder angular-builder-custom-terser-options:browser-custom-terser
Error: Could not find the implementation for builder angular-builder-custom-terser-options:browser-custom-terser
    at WorkspaceNodeModulesArchitectHost.resolveBuilder (/Users/foo/bar/node_modules/@angular-devkit/architect/node/node-modules-architect-host.js:49:19)
...

Not work for me

I did step by step you instruction, can you help me with that?

source

Not working with dev configuration

After adding angular-builder-custom-terser-options to project ng build --prod and ng serve --prod works very well but when I build ng build or run ng serve dev configuration then I have error in js console when I click anywhere:

ERROR TypeError: Cannot read property 'init' of undefined
    at DefaultStyleDirective.init (core.js:422)
    at new StyleDirective (extended.js:560)
    at new DefaultStyleDirective (extended.js:649)
    at createClass (core.js:28360)
    at createDirectiveInstance (core.js:28186)
    at createViewNodes (core.js:29804)
    at callViewAction (core.js:30254)
    at execComponentViewsAction (core.js:30159)
    at createViewNodes (core.js:29833)
    at createRootView (core.js:29676)
View_DataListComponent_0 @ DataListComponent.html:1
proxyClass @ compiler.js:17198
logError @ core.js:31083
handleError @ core.js:19918
dispatchEvent @ core.js:25918
(anonymous) @ core.js:26581
(anonymous) @ platform-browser.js:1678
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
onInvokeTask @ core.js:21826
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:422
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
invokeTask @ zone.js:1744
globalZoneAwareCallback @ zone.js:1770