Front end build on Angular 20 became drastically slow with Web pack, it is taking around 7 hours but on angular 19 with webpack the build happened within 40 mins unsure what caused this difference
Below is my angular.json and package.json with angular 20. I am unsure why the build time generating the WAR drastically increased. Kindly provide the suggestions here.
Angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {"sasnatural-web": {"root": "","sourceRoot": "src","projectType": "application","architect": {"build": {"builder": "@angular-devkit/build-angular:browser","options": {"outputPath": "dist","index": "src/index.html","main": "src/main.ts","tsConfig": "src/tsconfig.app.json","polyfills": "src/polyfills.ts","inlineStyleLanguage": "scss","assets": ["src/assets","src/favicon.ico","src/config.json"],"styles": ["node_modules/bootstrap/dist/css/bootstrap.min.css","node_modules/@fortawesome/fontawesome-free/css/all.css","node_modules/@angular/material/prebuilt-themes/indigo-pink.css","node_modules/jquery-ui/dist/themes/base/jquery-ui.css","src/styles.scss"],"scripts": ["node_modules/jquery/dist/jquery.js","node_modules/bootstrap/dist/js/bootstrap.bundle.min.js","node_modules/moment/moment.js","node_modules/jquery-ui/dist/jquery-ui.js"],"allowedCommonJsDependencies": ["jquery","ajv"]},"configurations": {"production": {"optimization": true,"outputHashing": "all","sourceMap": false,"namedChunks": false,"aot": true,"extractLicenses": true,"vendorChunk": false,"buildOptimizer": true,"fileReplacements": [{"replace": "src/environments/environment.ts","with": "src/environments/environment.prod.ts"}]},"dev": {"sourceMap": true,"buildOptimizer": false,"optimization": false}}},"serve": {"builder": "@angular-devkit/build-angular:dev-server","options": {"buildTarget": "sasnatural-web:build"},"configurations": {"production": {"buildTarget": "sasnatural-web:build:production"},"dev": {"buildTarget": "sasnatural-web:build:dev"}}},"extract-i18n": {"builder": "@angular-devkit/build-angular:extract-i18n","options": {"buildTarget": "sasnatural-web:build"}},"test": {"builder": "@angular-devkit/build-angular:karma","options": {"main": "src/test.ts","karmaConfig": "./karma.conf.js","polyfills": "src/polyfills.ts","tsConfig": "src/tsconfig.spec.json","scripts": ["node_modules/jquery/dist/jquery.js","node_modules/bootstrap/dist/js/bootstrap.js","node_modules/moment/moment.js"],"styles": ["src/styles.scss"],"assets": ["src/assets","src/favicon.ico"]}},"lint": {"builder": "@angular-devkit/build-angular:tslint","options": {"tsConfig": ["src/tsconfig.app.json","src/tsconfig.spec.json"],"exclude": []}}}},"sasnatural-web-e2e": {"root": "e2e","sourceRoot": "e2e","projectType": "application","architect": {"lint": {"builder": "@angular-devkit/build-angular:tslint","options": {"tsConfig": ["e2e/tsconfig.e2e.json"],"exclude": []}}}}
},
"schematics": {"@schematics/angular:component": {"prefix": "app","styleext": "scss"},"@schematics/angular:directive": {"prefix": "app"}
},
"cli": {"analytics": false,"cache": {"enabled": false}
}}
Package.json
{
"name": "test",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config proxy.conf.json -c dev",
"startProd": "ng serve --configuration production --proxy-config proxy.conf.json",
"build": "ng build",
"buildProd": "ng build --configuration production",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"tsc": "tsc"
},
"private": true,
"dependencies": {
"@angular/animations": "^20.0.0",
"@angular/cdk": "^20.0.0",
"@angular/common": "^20.0.0",
"@angular/compiler": "^20.0.0",
"@angular/core": "^20.0.0",
"@angular/forms": "^20.0.0",
"@angular/material": "^20.0.0",
"@angular/platform-browser": "^20.0.0",
"@angular/platform-browser-dynamic": "^20.0.0",
"@angular/router": "^20.0.0",
"@fortawesome/fontawesome-free": "^6.6.0",
"@primeuix/styled": "^0.7.0",
"@primeuix/styles": "^1.2.1",
"@primeuix/utils": "^0.6.0",
"ajv": "~8.17.1",
"bootstrap": "^5.3.3",
"core-js": "~3.39.0",
"jquery": "~3.7.1",
"jquery-ui": "1.14.1",
"moment": "~2.30.1",
"ngx-mask": "~18.0.0",
"primeng": "^20.0.0",
"rxjs": "~7.8.1",
"stylus": "0.59.0",
"systemjs": "~6.15.1",
"tslib": "~2.8.1",
"url": "0.11.4",
"uuid": "^10.0.0",
"zone.js": "^0.15.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^20.0.0",
"@angular-eslint/eslint-plugin": "^19.0.2",
"@angular/cli": "^20.0.0",
"@angular/compiler-cli": "^20.0.0",
"@angular/language-service": "^20.0.0",
"@types/jasmine": "^5.1.4",
"@types/jasminewd2": "^2.0.13",
"@types/node": "^22.12.0",
"jasmine-core": "^5.4.0",
"jasmine-spec-reporter": "^7.0.0",
"karma": "^6.4.4",
"karma-chrome-launcher": "^3.2.0",
"karma-cli": "^2.0.0",
"karma-coverage-istanbul-reporter": "^3.0.3",
"karma-jasmine": "^5.1.0",
"karma-jasmine-html-reporter": "^2.1.0",
"ts-node": "^10.9.2",
"typescript": "^5.7.2"
},
"engines": {
"node": ">= 18.20.5",
"npm": ">= 10.8.2"
},
"overrides": {
"core-js": "~3.39.0",
"stylus": "0.59.0",
"uuid": "^10.0.0"
}
}