Switching from angular.json to webpack-obfuscator

[neil-benn]

Hello,

I'm very sorry to ask such a basic question but I need guidance. I've got currently in my angular.json for the build:

      "build": {
         "builder": "@angular-devkit/build-angular:browser",
         "options": {
           "outputPath": "dist",
           "index": "src/index.html",
           "main": "src/main.ts",
           "polyfills": "src/polyfills.ts",
           "tsConfig": "src/tsconfig.app.json",
           "assets": [
             "src/favicon.ico",
             "src/assets",
             {
               "glob": "**/*",
               "input": "node_modules/ngx-monaco-editor/assets/monaco",
               "output": "/assets/monaco"
           }


           ],
           "styles": [
             "node_modules/bootstrap/dist/css/bootstrap.min.css",
             "src/styles.css",
             "node_modules/angular-notifier/styles.css",
             "node_modules/primeicons/primeicons.css",
             "node_modules/primeng/resources/themes/nova-dark/theme.css",
             "node_modules/primeng/resources/primeng.min.css"

           ],
           "scripts": [
             "node_modules/jquery/dist/jquery.min.js",
             "node_modules/popper.js/dist/umd/popper.js",
             "node_modules/bootstrap/dist/js/bootstrap.min.js"
           ]
         },
         "configurations": {
           "production": {
             "fileReplacements": [
               {
                 "replace": "src/environments/environment.ts",
                 "with": "src/environments/environment.prod.ts"
               }
             ],
             "optimization": true,
             "outputHashing": "all",
             "sourceMap": false,
             "extractCss": true,
             "namedChunks": false,
             "aot": true,
             "extractLicenses": true,
             "vendorChunk": false,
             "buildOptimizer": true
           }
         }
       },

This is fairly standard; we've not changed much. So firstly I install the custom webpack dependency:

npm i @angular-builders/custom-webpack -D

Then I have to configure the custom-webpack to include the obfuscation so I modify the above to the following:

"build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./custom-webpack.config.js",
              "replaceDuplicatePlugins": true
            },
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets",
              {
                "glob": "**/*",
                "input": "node_modules/ngx-monaco-editor/assets/monaco",
                "output": "/assets/monaco"
            }


            ],
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.css",
              "node_modules/angular-notifier/styles.css",
              "node_modules/primeicons/primeicons.css",
              "node_modules/primeng/resources/themes/nova-dark/theme.css",
              "node_modules/primeng/resources/primeng.min.css"

            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/popper.js/dist/umd/popper.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },

I then reference the obfuscation file custom-webpack.config.js which is as follows:

// webpack.config.js
'use strict';

const JavaScriptObfuscator = require('webpack-obfuscator');

module.exports = {
    entry: {
        'main': "dist/main.js",
    },
    output: {
        path: 'dist',
        filename: '[name].obs.js' // output: abc.js, cde.js
    },
    plugins: [
        new JavaScriptObfuscator({
            rotateUnicodeArray: true
        }, [])
    ]
};

I'm on Angular 8.3.25 but this is giving me 'An unhandled exception occurred: Job name "..getProjectMetadata" does not exist.'.

Again; I'm sorry if this is not specific to this tool but I'm unsure how to get from the angular.json I have now to the obfuscation detailed in the guide?

I'm happy to write this up in a detailed tutorial when done!

[trueflywood]

/**
 * Custom angular webpack configuration
 */
const JavaScriptObfuscator = require('webpack-obfuscator');
module.exports = (config, options) => {
   
    if (config.mode === 'production') {
        config.plugins.push(new JavaScriptObfuscator({
            // rotateUnicodeArray: true,
            unicodeEscapeSequence: false,
            compact: true,
            controlFlowFlattening: true,
            controlFlowFlatteningThreshold: 0.75,
            // deadCodeInjection: true,
            // deadCodeInjectionThreshold: 0.4,
            debugProtection: false,
            debugProtectionInterval: false,
            disableConsoleOutput: true,
            identifierNamesGenerator: 'hexadecimal',
            log: false,
            seed: 1,
            renameGlobals: false,
            rotateStringArray: true,
            selfDefending: true,
            stringArray: true,
            stringArrayEncoding: 'rc4',
            stringArrayThreshold: 0.75
        }, []));
    }
    return config;
}