Development: Upgrade to Angular 22 and TypeScript 6

.env

@@ -33,7 +33,7 @@ NGINX_IMAGE_VARIANT=-alpine-slim
 # Testing
 ALPINE_VERSION=3.23.4
 # Used for both the Docker image and @playwright/test in src/test/playwright/package.json
-PLAYWRIGHT_VERSION=v1.60.0
+PLAYWRIGHT_VERSION=v1.61.1
 
 # Monitoring
 # TODO: Upgrade Prometheus to v3.x (breaking config changes, v2 is EOL). See https://prometheus.io/docs/prometheus/latest/migration/
@@ -60,6 +60,6 @@ KEYCLOAK_VERSION=26.6
 # Run `node supporting_scripts/sync-client-versions.mjs` after changing these.
 # Note: ANGULAR_VERSION does not update all Angular-related packages; Angular CDK/Material, CLI,
 # and build tooling are excluded from automatic syncing and may need separate updates.
-ANGULAR_ESLINT_VERSION=21.4.0
-ANGULAR_VERSION=21.2.16
-TYPESCRIPT_ESLINT_VERSION=8.60.1
+ANGULAR_ESLINT_VERSION=22.0.0
+ANGULAR_VERSION=22.0.6
+TYPESCRIPT_ESLINT_VERSION=8.63.0

build.gradle

@@ -9,6 +9,29 @@ buildscript {
             force "com.github.jknack:handlebars:4.5.3"
         }
     }
+    // The custom OpenAPI generator (generatorName "angular22", https://github.com/ls1intum/openapi-generator-angular22)
+    // is only needed when regenerating the Angular client locally via `./gradlew openApiGenerate`. The
+    // generated client is committed, so CI never regenerates it and must not try to resolve this
+    // artifact. The generator + Maven Local are therefore added to the buildscript classpath solely for
+    // that task (so the org.openapi.generator plugin discovers it via ServiceLoader during regeneration).
+    //
+    // The generator is published to Maven Central (no authentication needed). To regenerate the client
+    // it is resolved from either:
+    //   1. Maven Central — the released artifact, resolved with no credentials. OR
+    //   2. Maven Local — clone the generator repo and run `./gradlew publishToMavenLocal` there; this
+    //      build-from-source path needs no registry and works before a version reaches Central.
+    if (gradle.startParameter.taskNames.any { it.toLowerCase().contains("openapigenerate") }) {
+        repositories {
+            // Build-from-source fallback — checked first so a locally-built generator is picked up
+            // without network access (and works before a release is on Maven Central).
+            mavenLocal()
+            // Released generator artifact, published to Maven Central and resolved without authentication.
+            mavenCentral()
+        }
+        dependencies {
+            classpath "de.tum.cit.aet:openapi-generator-angular22:1.0.0"
+        }
+    }
     dependencies {
         // Force the entire Jackson 2.x family to 2.22.0 on the build-script / plugin classpath too.
         // The org.openapi.generator and springdoc plugins otherwise drag in older jackson-databind

eslint.config.mjs

@@ -158,7 +158,10 @@ export default tseslint.config(
         rules: {
             ...prettierPlugin.configs.recommended.rules,
             ...tsPlugin.configs.recommended.rules,
-            ...angularPlugin.configs.recommended.rules,
+            // angular-eslint 22 removed `configs` from `@angular-eslint/eslint-plugin`; the recommended
+            // rules now live in the `angular-eslint` meta-package's flat `tsRecommended` config array
+            // (an array of flat-config objects, only one of which carries `rules`).
+            ...Object.assign({}, ...angular.configs.tsRecommended.map((c) => c.rules ?? {})),
             '@typescript-eslint/no-non-null-assertion': 'off',
             '@typescript-eslint/no-unsafe-return': 'off',
             '@typescript-eslint/no-unsafe-member-access': 'off',

gradle/openapi.gradle

@@ -67,8 +67,15 @@
     // 5. Post-process the generated files to remove leading underscores and numeric suffixes from method names
     // 6. Remove unused imports from the generated TypeScript files to satisfy our tsconfig.
 
+    // The Angular client is generated by our custom de.tum.cit.aet:openapi-generator-angular22:1.0.0
+    // generator (generatorName "angular22"): standalone, inject()-based services (no constructor
+    // injection — required for the AnalogJS fastCompile test runner under Angular 22) and
+    // signal/readonly-aware models. The generator is added to the buildscript classpath (only for the
+    // openApiGenerate task) in the root build.gradle, which also documents how to obtain it (Maven
+    // Central — no auth — or build-from-source via publishToMavenLocal). The generated client is
+    // committed, so CI never runs openApiGenerate.
     openApiGenerate {
-        generatorName = "typescript-angular"
+        generatorName = "angular22"
         inputSpec.set(file("${rootDir}/openapi/openapi.yaml").toURI().toString())
         outputDir = "${rootDir}/src/main/webapp/app/openapi"
         apiPackage = "api"
@@ -79,10 +86,14 @@
                 set: 'Array',
         ]
         languageSpecificPrimitives =['void']
+        // useHttpResource=false: classical HttpClient.get() Observable methods (not the signal-based
+        // httpResource API). useInjectFunction=true: inject() instead of constructor injection.
+        // readonlyModels=false: keep DTO properties mutable (Artemis builds/edits DTOs in place).
         configOptions = [
-            serviceSuffix: "ApiService",
-            supportsES6: "true",
-            serviceFileSuffix: "Api.service"
+            useHttpResource  : "false",
+            useInjectFunction: "true",
+            separateResources: "false",
+            readonlyModels   : "false"
         ]
     }
 

package.json

@@ -8,33 +8,33 @@
         "email": "krusche@tum.de",
         "url": "https://aet.cit.tum.de/krusche"
     },
-    "packageManager": "pnpm@11.9.0",
+    "packageManager": "pnpm@11.10.0",
     "dependencies": {
-        "@angular/cdk": "21.2.14",
-        "@angular/common": "21.2.17",
-        "@angular/compiler": "21.2.17",
-        "@angular/core": "21.2.17",
-        "@angular/forms": "21.2.17",
-        "@angular/platform-browser": "21.2.17",
-        "@angular/platform-browser-dynamic": "21.2.17",
-        "@angular/router": "21.2.17",
-        "@angular/service-worker": "21.2.17",
-        "@angular/youtube-player": "21.2.14",
+        "@angular/cdk": "22.0.4",
+        "@angular/common": "22.0.6",
+        "@angular/compiler": "22.0.6",
+        "@angular/core": "22.0.6",
+        "@angular/forms": "22.0.6",
+        "@angular/platform-browser": "22.0.6",
+        "@angular/platform-browser-dynamic": "22.0.6",
+        "@angular/router": "22.0.6",
+        "@angular/service-worker": "22.0.6",
+        "@angular/youtube-player": "22.0.4",
         "@ctrl/ngx-emoji-mart": "9.3.0",
         "@dagrejs/dagre": "3.0.0",
         "@e965/xlsx": "0.20.3",
         "@embedpdf/engines": "2.14.4",
         "@embedpdf/models": "2.14.4",
         "@embedpdf/pdfium": "2.14.4",
         "@fingerprintjs/fingerprintjs": "5.2.0",
-        "@fortawesome/angular-fontawesome": "4.0.0",
-        "@fortawesome/fontawesome-svg-core": "7.2.0",
-        "@fortawesome/free-regular-svg-icons": "7.2.0",
-        "@fortawesome/free-solid-svg-icons": "7.2.0",
-        "@ng-bootstrap/ng-bootstrap": "20.0.0",
-        "@ngx-translate/core": "17.0.0",
+        "@fortawesome/angular-fontawesome": "5.1.0",
+        "@fortawesome/fontawesome-svg-core": "7.3.0",
+        "@fortawesome/free-regular-svg-icons": "7.3.0",
+        "@fortawesome/free-solid-svg-icons": "7.3.0",
+        "@ng-bootstrap/ng-bootstrap": "21.0.0",
+        "@ngx-translate/core": "18.0.0",
         "@primeuix/themes": "2.0.3",
-        "@sentry/angular": "10.57.0",
+        "@sentry/angular": "10.64.0",
         "@stomp/rx-stomp": "2.4.0",
         "@stomp/stompjs": "7.3.0",
         "@tumaet/apollon": "5.0.1",
@@ -53,9 +53,9 @@
         "html-diff-ts": "1.4.2",
         "katex": "0.17.0",
         "lodash-es": "4.18.1",
-        "markdown-it": "14.2.0",
+        "markdown-it": "14.3.0",
         "monaco-editor": "0.55.1",
-        "papaparse": "5.5.3",
+        "papaparse": "5.5.4",
         "primeicons": "7.0.0",
         "primeng": "21.1.9",
         "rxjs": "7.8.2",
@@ -66,56 +66,56 @@
         "yjs": "13.6.31"
     },
     "devDependencies": {
-        "@analogjs/vite-plugin-angular": "2.6.1",
-        "@analogjs/vitest-angular": "2.6.1",
-        "@angular-devkit/build-angular": "21.2.16",
-        "@angular-eslint/builder": "21.4.0",
-        "@angular-eslint/eslint-plugin": "21.4.0",
-        "@angular-eslint/schematics": "21.4.0",
-        "@angular-eslint/template-parser": "21.4.0",
-        "@angular/build": "21.2.16",
-        "@angular/cli": "21.2.16",
-        "@angular/compiler-cli": "21.2.17",
-        "@angular/language-service": "21.2.17",
+        "@analogjs/vite-plugin-angular": "2.6.3",
+        "@analogjs/vitest-angular": "2.6.3",
+        "@angular-devkit/build-angular": "22.0.5",
+        "@angular-eslint/builder": "22.0.0",
+        "@angular-eslint/eslint-plugin": "22.0.0",
+        "@angular-eslint/schematics": "22.0.0",
+        "@angular-eslint/template-parser": "22.0.0",
+        "@angular/build": "22.0.5",
+        "@angular/cli": "22.0.5",
+        "@angular/compiler-cli": "22.0.6",
+        "@angular/language-service": "22.0.6",
         "@eslint/js": "10.0.1",
-        "@tailwindcss/postcss": "4.3.1",
+        "@tailwindcss/postcss": "4.3.2",
         "@types/d3-shape": "3.1.8",
         "@types/lodash-es": "4.17.12",
         "@types/markdown-it": "14.1.2",
-        "@types/node": "24.13.2",
+        "@types/node": "24.13.3",
         "@types/papaparse": "5.5.2",
         "@types/turndown": "5.0.6",
-        "@typescript-eslint/eslint-plugin": "8.61.1",
-        "@typescript-eslint/parser": "8.61.1",
-        "@typescript-eslint/utils": "8.61.1",
-        "@vitest/coverage-istanbul": "4.1.9",
-        "angular-eslint": "21.4.0",
+        "@typescript-eslint/eslint-plugin": "8.63.0",
+        "@typescript-eslint/parser": "8.63.0",
+        "@typescript-eslint/utils": "8.63.0",
+        "@vitest/coverage-istanbul": "4.1.10",
+        "angular-eslint": "22.0.0",
         "cross-env": "10.1.0",
         "esbuild": "0.28.1",
-        "eslint": "10.5.0",
+        "eslint": "10.6.0",
         "eslint-plugin-prettier": "5.5.6",
         "folder-hash": "4.1.3",
         "husky": "9.1.7",
         "jsdom": "29.1.1",
         "lighthouse": "13.4.0",
-        "lint-staged": "17.0.7",
+        "lint-staged": "17.0.8",
         "ng-mocks": "14.15.3",
         "postcss-html": "1.8.1",
         "postcss-scss": "4.0.9",
-        "prettier": "3.8.4",
+        "prettier": "3.9.4",
         "rimraf": "6.1.3",
         "sass": "1.101.0",
-        "stylelint": "17.13.0",
+        "stylelint": "17.14.0",
         "stylelint-config-html": "1.1.0",
         "stylelint-config-standard-scss": "17.0.0",
         "stylelint-scss": "7.2.0",
-        "tailwindcss": "4.3.1",
+        "tailwindcss": "4.3.2",
         "tailwindcss-primeui": "0.6.1",
         "ts-morph": "28.0.0",
-        "typescript": "5.9.3",
-        "typescript-eslint": "8.61.1",
+        "typescript": "6.0.3",
+        "typescript-eslint": "8.63.0",
         "vite-tsconfig-paths": "6.1.1",
-        "vitest": "4.1.9",
+        "vitest": "4.1.10",
         "vitest-canvas-mock": "1.1.4"
     },
     "engines": {