What configuration should be used to obfuscate Angular 18 project with javascript-obfuscator?

What configuration should be used to obfuscate Angular 18 project with javascript-obfuscator ?

I am using package.json

{
"name": "angular.dev",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "NG_BUILD_PARALLEL_TS=0 ng serve",
"build": "ng build --configuration production",
"watch": "ng build --watch --configuration development"
},
"private": true,
"dependencies": {
"@angular/animations": "^18.0.0",
"@angular/cdk": "^18.0.0",
"@angular/common": "^18.0.0",
"@angular/compiler": "^18.0.0",
"@angular/core": "^18.0.0",
"@angular/forms": "^18.0.0",
"@angular/material": "^18.0.0",
"@angular/platform-browser": "^18.0.0",
"@aws-amplify/ui-angular": "^5.0.19",
"aws-amplify": "^6.5.3",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.14.0"
},
"devDependencies": {
"@angular-builders/custom-webpack": "^18.0.0",
"@angular/build": "^18.0.1",
"@angular/cli": "^18.0.0",
"@angular/compiler-cli": "^18.0.0",
"javascript-obfuscator": "^4.1.1",
"typescript": "~5.5.0",
"webpack-cli": "^5.1.4"
}
}


with Angular 18, javascript-obfuscator version 4.1.1 and @angular-builders/custom-webpack version 18.0.0

My angular.json file is

{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"first-app": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"inlineTemplate": true,
"inlineStyle": true,
"style": "scss",
"skipTests": true
},
"@schematics/angular:class": {
"skipTests": true
},
"@schematics/angular:directive": {
"skipTests": true
},
"@schematics/angular:guard": {
"skipTests": true
},
"@schematics/angular:interceptor": {
"skipTests": true
},
"@schematics/angularipe": {
"skipTests": true
},
"@schematics/angular:resolver": {
"skipTests": true
},
"@schematics/angular:service": {
"skipTests": true
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "./webpack.config.js"
},
"main": "src/main.ts",
"outputPath": "dist/first-app",
"index": "src/index.html",
"polyfills": [
"zone.js"
],
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
{
"glob": "**/*",
"input": "public"
}
],
"styles": [
"src/styles.css"
],
"scripts": []
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kB",
"maximumError": "1MB"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kB",
"maximumError": "4kB"
}
],
"outputHashing": "all"
},
"development": {
"optimization": false,
"extractLicenses": false,
"sourceMap": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular/build:dev-server",
"configurations": {
"production": {
"buildTarget": "first-app:buildroduction"
},
"development": {
"buildTarget": "first-app:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular/build:extract-i18n"
}
}
}
},
"cli": {
"analytics": false
}
}


and webpack.config.js is

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

module.exports = {
mode: 'development',
plugins: [
new JavaScriptObfuscator(
{
rotateStringArray: true,
stringArray: true,
stringArrayEncoding: ['rc4'],
stringArrayThreshold: 0.75,
},
['vendor.js']
),
],
};


when I am running this project with npm run build i am getting the error :

[error] ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
- configuration.plugins[12] misses the property 'apply'. Should be:
function
-> The run point of the plugin, required method.
at validate (D:\code\temp\playground_0-hello-world\node_modules\webpack\node_modules\schema-utils\dist\validate.js:191:11)
at validateSchema (D:\code\temp\playground_0-hello-world\node_modules\webpack\lib\validateSchema.js:78:2)
at create (D:\code\temp\playground_0-hello-world\node_modules\webpack\lib\webpack.js:130:24)
at webpack (D:\code\temp\playground_0-hello-world\node_modules\webpack\lib\webpack.js:182:32)
at Object.f [as webpackFactory] (D:\code\temp\playground_0-hello-world\node_modules\webpack\lib\index.js:73:50)
at createWebpack (D:\code\temp\playground_0-hello-world\node_modules\@angular-devkit\build-webpack\src\builders\webpack\index.js:28:36)
at runWebpack (D:\code\temp\playground_0-hello-world\node_modules\@angular-devkit\build-webpack\src\builders\webpack\index.js:40:12)
at D:\code\temp\playground_0-hello-world\node_modules\@angular-builders\custom-webpack\node_modules\@angular-devkit\build-angular\src\builders\browser\index.js:116:47
at D:\code\temp\playground_0-hello-world\node_modules\rxjs\src\internal\operators\switchMap.ts:109:21
at OperatorSubscriber._this._next (D:\code\temp\playground_0-hello-world\node_modules\rxjs\src\internal\operators\OperatorSubscriber.ts:70:13)




Can anyone suggest which package.json, angular.json and webpack.config.js configuration should be used to obfuscate Angular 18 project using javascript-obfuscator? Are there any other options to obfuscate Angular 18 project code?

Continue reading...