Update Angular from 20 to 21

scripts/generate-angular-json.sh

@@ -25,7 +25,7 @@ DEV_ENV_NAMES=$(echo $DEV_ENV_FILES| jq -R -s -c '[split(" ")[]|capture(".web/sr
 ALL_ENV_NAMES=$(echo $ALL_ENV_FILES| jq -R -s -c '[split(" ")[]|capture(".web/src/environments/environment.(?<env>.*).ts")|.env]')
 
 PROD_BUILD_CONFIGURATIONS=$(echo $PROD_ENV_NAMES | jq '[.[]|{(.):{"outputHashing":"all","fileReplacements":[{"replace":"src/environments/environment.ts","with":("src/environments/environment." + . +".ts")},{"replace":"src/environments/version.ts","with":("src/environments/version." + . +".ts")}]}}]|add')
-DEV_BUILD_CONFIGURATIONS=$(echo $DEV_ENV_NAMES |jq '[.[]|{(.):{"buildOptimizer":false,"optimization":false,"vendorChunk":true,"extractLicenses":false,"sourceMap":true,"namedChunks":true,"fileReplacements":[{"replace":"src/environments/environment.ts","with":("src/environments/environment." + . +".ts")},{"replace":"src/environments/version.ts","with":("src/environments/version." + . +".ts")}]}}]|add')
+DEV_BUILD_CONFIGURATIONS=$(echo $DEV_ENV_NAMES |jq '[.[]|{(.):{"optimization":false,"extractLicenses":false,"sourceMap":true,"namedChunks":true,"fileReplacements":[{"replace":"src/environments/environment.ts","with":("src/environments/environment." + . +".ts")},{"replace":"src/environments/version.ts","with":("src/environments/version." + . +".ts")}]}}]|add')
 
 BUILD_CONFIGURATIONS=$(echo "$PROD_BUILD_CONFIGURATIONS$DEV_BUILD_CONFIGURATIONS" | jq -s add)
 SERVE_CONFIGURATIONS=$(echo $ALL_ENV_NAMES| jq '[.[]|{(.):{"buildTarget":("frontend:build:" + .)}}]|add')

web/angular-template.json

@@ -15,48 +15,68 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular/build:application",
           "options": {
-            "outputPath": "dist/frontend",
+            "outputPath": {
+              "base": "dist/frontend"
+            },
             "index": "src/index.html",
-            "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": [
+              "src/polyfills.ts"
+            ],
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "sass",
-            "assets": ["src/favicon.ico", "src/assets"],
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
             "styles": [
               "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "./node_modules/highlight.js/styles/github.css",
               "src/styles.scss"
             ],
             "scripts": [],
-            "webWorkerTsConfig": "tsconfig.worker.json"
+            "webWorkerTsConfig": "tsconfig.worker.json",
+            "browser": "src/main.ts"
           },
           "configurations": {},
           "defaultConfiguration": "prod-oss"
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular/build:dev-server",
           "options": {
             "proxyConfig": "proxy.conf.mjs"
           },
-          "configurations": {},
+          "configurations": {
+            "dev": {
+              "buildTarget": "frontend:build:dev"
+            },
+            "prod": {
+              "buildTarget": "frontend:build:prod"
+            }
+          },
           "defaultConfiguration": "dev-oss"
         },
         "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "builder": "@angular/build:extract-i18n",
           "options": {
             "buildTarget": "frontend:build"
           }
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "@angular/build:karma",
           "options": {
-            "polyfills": ["zone.js", "zone.js/testing"],
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
             "inlineStyleLanguage": "sass",
-            "assets": ["src/favicon.ico", "src/assets"],
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
             "styles": [
               "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.scss"
@@ -68,14 +88,19 @@
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
-            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
+            "lintFilePatterns": [
+              "src/**/*.ts",
+              "src/**/*.html"
+            ]
           }
         }
       }
     }
   },
   "cli": {
     "analytics": "1f1053be-5335-4fa5-ac1f-3e6ad9f69ed3",
-    "schematicCollections": ["@angular-eslint/schematics"]
+    "schematicCollections": [
+      "@angular-eslint/schematics"
+    ]
   }
 }

web/karma.conf.js

@@ -26,7 +26,7 @@ module.exports = function (config) {
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
       require('karma-coverage'),
-      require('@angular-devkit/build-angular/plugins/karma')
+
     ],
     files: [
       { pattern: 'https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap', type: "css", included: true, served: false, watched: false },