upgrade to Angular 22

AGENTS.md

@@ -9,7 +9,7 @@ If an addition would exceed the limit, trim existing prose elsewhere — prefer
 ## Tech stack
 
 - **Backend:** Python 3.13+, aiohttp, python-socketio 5.x, yt-dlp
-- **Frontend:** Angular 21, TypeScript, Bootstrap 5, SASS, ngx-socket-io
+- **Frontend:** Angular 22, TypeScript, Bootstrap 5, SASS, ngx-socket-io
 - **Package managers:** uv (Python), pnpm (frontend)
 - **Container:** Multi-stage Docker (Node builder + Python runtime), multi-arch (amd64/arm64)
 

ui/package.json

@@ -23,41 +23,41 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^21.2.17",
+    "@angular/animations": "^22.0.4",
-    "@angular/common": "^21.2.17",
+    "@angular/common": "^22.0.4",
-    "@angular/compiler": "^21.2.17",
+    "@angular/compiler": "^22.0.4",
-    "@angular/core": "^21.2.17",
+    "@angular/core": "^22.0.4",
-    "@angular/forms": "^21.2.17",
+    "@angular/forms": "^22.0.4",
-    "@angular/platform-browser": "^21.2.17",
+    "@angular/platform-browser": "^22.0.4",
-    "@angular/platform-browser-dynamic": "^21.2.17",
+    "@angular/platform-browser-dynamic": "^22.0.4",
-    "@angular/service-worker": "^21.2.17",
+    "@angular/service-worker": "^22.0.4",
     "@fortawesome/angular-fontawesome": "~4.0.0",
     "@fortawesome/fontawesome-svg-core": "^7.3.0",
     "@fortawesome/free-brands-svg-icons": "^7.3.0",
     "@fortawesome/free-regular-svg-icons": "^7.3.0",
     "@fortawesome/free-solid-svg-icons": "^7.3.0",
-    "@ng-bootstrap/ng-bootstrap": "^20.0.0",
+    "@ng-bootstrap/ng-bootstrap": "^21.0.0",
-    "@ng-select/ng-select": "^21.8.2",
+    "@ng-select/ng-select": "^23.2.0",
     "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.3.8",
-    "ngx-cookie-service": "^21.3.1",
+    "ngx-cookie-service": "^22.0.0",
     "ngx-socket-io": "~4.10.0",
     "rxjs": "~7.8.2",
     "tslib": "^2.8.1",
     "zone.js": "0.15.0"
   },
   "devDependencies": {
-    "@angular-eslint/builder": "21.1.0",
+    "@angular-eslint/builder": "22.0.0",
-    "@angular/build": "^21.2.17",
+    "@angular/build": "^22.0.4",
-    "@angular/cli": "^21.2.17",
+    "@angular/cli": "^22.0.4",
-    "@angular/compiler-cli": "^21.2.17",
+    "@angular/compiler-cli": "^22.0.4",
-    "@angular/localize": "^21.2.17",
+    "@angular/localize": "^22.0.4",
     "@eslint/js": "^9.39.4",
-    "angular-eslint": "21.1.0",
+    "angular-eslint": "22.0.0",
     "eslint": "^9.39.4",
     "jsdom": "^27.4.0",
-    "typescript": "~5.9.3",
+    "typescript": "~6.0.3",
-    "typescript-eslint": "8.47.0",
+    "typescript-eslint": "8.62.0",
     "vitest": "^4.1.9"
   }
 }

ui/src/app/app.config.ts

@@ -1,6 +1,6 @@
 import { ApplicationConfig, provideBrowserGlobalErrorListeners, isDevMode, provideZoneChangeDetection } from '@angular/core';
 import { provideServiceWorker } from '@angular/service-worker';
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi, withXhr } from '@angular/common/http';
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -12,6 +12,6 @@ export const appConfig: ApplicationConfig = {
             // or after 30 seconds (whichever comes first).
             registrationStrategy: 'registerWhenStable:30000'
           }),
-    provideHttpClient(withInterceptorsFromDi()),
+    provideHttpClient(withXhr(), withInterceptorsFromDi()),
   ]
 };

ui/src/app/components/master-checkbox.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, viewChild, output, input } from "@angular/core";
+import { Component, ElementRef, viewChild, output, input, ChangeDetectionStrategy } from "@angular/core";
 import { Checkable } from "../interfaces";
 import { FormsModule } from "@angular/forms";
 
@@ -10,7 +10,10 @@ import { FormsModule } from "@angular/forms";
     <label class="form-check-label visually-hidden" for="{{id()}}-select-all">Select all</label>
   </div>
 `,
-imports: [
+    // Shared Checkable objects are mutated in place; Eager preserves pre-v22 behavior.
+    // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
+    changeDetection: ChangeDetectionStrategy.Eager,
+    imports: [
   FormsModule
 ]
 })

ui/src/app/components/slave-checkbox.component.ts

@@ -1,4 +1,4 @@
-import { Component, input } from '@angular/core';
+import { Component, input, ChangeDetectionStrategy } from '@angular/core';
 import { SelectAllCheckboxComponent } from './master-checkbox.component';
 import { Checkable } from '../interfaces';
 import { FormsModule } from '@angular/forms';
@@ -11,7 +11,10 @@ import { FormsModule } from '@angular/forms';
     <label class="form-check-label visually-hidden" for="{{master().id()}}-{{id()}}-select">Select item</label>
   </div>
 `,
-imports: [  
+    // Shared Checkable objects are mutated in place; Eager preserves pre-v22 behavior.
+    // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
+    changeDetection: ChangeDetectionStrategy.Eager,
+    imports: [  
   FormsModule
 ]
 })

ui/tsconfig.app.json

@@ -12,5 +12,13 @@
   ],
     "exclude": [
     "src/**/*.spec.ts"
-  ]
+  ],
+  "angularCompilerOptions": {
+    "extendedDiagnostics": {
+      "checks": {
+        "nullishCoalescingNotNullable": "suppress",
+        "optionalChainNotNullable": "suppress"
+      }
+    }
+  }
 }