u/Adventurous-Gain-478

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"
  }
}
reddit.com
u/Adventurous-Gain-478 — 3 days ago