Chore: upgrade to Angular v21 (#11746)

src-ui/angular.json

@@ -156,16 +156,7 @@
           "builder": "@angular-builders/jest:run",
           "options": {
             "tsConfig": "tsconfig.spec.json",
-            "assets": [
+            "zoneless": false
-              "src/favicon.ico",
-              "src/apple-touch-icon.png",
-              "src/assets",
-              "src/manifest.webmanifest"
-            ],
-            "styles": [
-              "src/styles.scss"
-            ],
-            "scripts": []
           }
         },
         "lint": {

src-ui/jest.config.js

@@ -1,5 +1,23 @@
+const { createEsmPreset } = require('jest-preset-angular/presets')
+
+const esmPreset = createEsmPreset({
+  tsconfig: '<rootDir>/tsconfig.spec.json',
+  stringifyContentPathRegex: '\\.(html|svg)$',
+})
+
 module.exports = {
-  preset: 'jest-preset-angular',
+  ...esmPreset,
+  transform: {
+    ...esmPreset.transform,
+    '^.+\\.(ts|js|mjs|html|svg)$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$',
+        useESM: true,
+      },
+    ],
+  },
   setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
   testPathIgnorePatterns: [
     '/node_modules/',
@@ -8,9 +26,10 @@ module.exports = {
     'abstract-paperless-service',
   ],
   transformIgnorePatterns: [
-    `<rootDir>/node_modules/.pnpm/(?!.*\\.mjs$|lodash-es|@angular\\+common.*locales)`,
+    'node_modules/(?!.*(\\.mjs$|tslib|lodash-es|@angular/common/locales/.*\\.js$))',
   ],
   moduleNameMapper: {
+    ...esmPreset.moduleNameMapper,
     '^src/(.*)': '<rootDir>/src/$1',
   },
   workerIdleMemoryLimit: '512MB',

src-ui/package.json

@@ -11,17 +11,17 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/cdk": "^20.2.13",
+    "@angular/cdk": "^21.0.6",
-    "@angular/common": "~20.3.15",
+    "@angular/common": "~21.0.8",
-    "@angular/compiler": "~20.3.15",
+    "@angular/compiler": "~21.0.8",
-    "@angular/core": "~20.3.15",
+    "@angular/core": "~21.0.8",
-    "@angular/forms": "~20.3.15",
+    "@angular/forms": "~21.0.8",
-    "@angular/localize": "~20.3.15",
+    "@angular/localize": "~21.0.8",
-    "@angular/platform-browser": "~20.3.15",
+    "@angular/platform-browser": "~21.0.8",
-    "@angular/platform-browser-dynamic": "~20.3.15",
+    "@angular/platform-browser-dynamic": "~21.0.8",
-    "@angular/router": "~20.3.15",
+    "@angular/router": "~21.0.8",
-    "@ng-bootstrap/ng-bootstrap": "^19.0.1",
+    "@ng-bootstrap/ng-bootstrap": "^20.0.0",
-    "@ng-select/ng-select": "^20.7.0",
+    "@ng-select/ng-select": "^21.1.4",
     "@ngneat/dirty-check-forms": "^3.0.3",
     "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.3.8",
@@ -30,8 +30,8 @@
     "ng2-pdf-viewer": "^10.4.0",
     "ngx-bootstrap-icons": "^1.9.3",
     "ngx-color": "^10.1.0",
-    "ngx-cookie-service": "^20.1.1",
+    "ngx-cookie-service": "^21.1.0",
-    "ngx-device-detector": "^10.1.0",
+    "ngx-device-detector": "^11.0.0",
     "ngx-ui-tour-ng-bootstrap": "^17.0.1",
     "rxjs": "^7.8.2",
     "tslib": "^2.8.1",
@@ -40,18 +40,18 @@
     "zone.js": "^0.15.1"
   },
   "devDependencies": {
-    "@angular-builders/custom-webpack": "^20.0.0",
+    "@angular-builders/custom-webpack": "^21.0.0-beta.1",
-    "@angular-builders/jest": "^20.0.0",
+    "@angular-builders/jest": "^21.0.0-beta.1",
-    "@angular-devkit/core": "^20.3.13",
+    "@angular-devkit/core": "^21.0.5",
-    "@angular-devkit/schematics": "^20.3.13",
+    "@angular-devkit/schematics": "^21.0.5",
-    "@angular-eslint/builder": "20.6.0",
+    "@angular-eslint/builder": "21.1.0",
-    "@angular-eslint/eslint-plugin": "20.6.0",
+    "@angular-eslint/eslint-plugin": "21.1.0",
-    "@angular-eslint/eslint-plugin-template": "20.6.0",
+    "@angular-eslint/eslint-plugin-template": "21.1.0",
-    "@angular-eslint/schematics": "20.6.0",
+    "@angular-eslint/schematics": "21.1.0",
-    "@angular-eslint/template-parser": "20.6.0",
+    "@angular-eslint/template-parser": "21.1.0",
-    "@angular/build": "^20.3.13",
+    "@angular/build": "^21.0.5",
-    "@angular/cli": "~20.3.13",
+    "@angular/cli": "~21.0.5",
-    "@angular/compiler-cli": "~20.3.15",
+    "@angular/compiler-cli": "~21.0.8",
     "@codecov/webpack-plugin": "^1.9.1",
     "@playwright/test": "^1.57.0",
     "@types/jest": "^30.0.0",
@@ -63,11 +63,11 @@
     "jest": "30.2.0",
     "jest-environment-jsdom": "^30.2.0",
     "jest-junit": "^16.0.0",
-    "jest-preset-angular": "^15.0.3",
+    "jest-preset-angular": "^16.0.0",
     "jest-websocket-mock": "^2.5.0",
     "prettier-plugin-organize-imports": "^4.3.0",
     "ts-node": "~10.9.1",
-    "typescript": "^5.8.3",
+    "typescript": "^5.9.3",
     "webpack": "^5.103.0"
   },
   "packageManager": "pnpm@10.17.1",

src-ui/src/app/components/file-drop/file-drop.component.ts

@@ -150,12 +150,11 @@ export class FileDropComponent {
     this.onDragLeave(event, true)
   }
 
-  @HostListener('window:blur', ['$event']) public onWindowBlur() {
+  @HostListener('window:blur') public onWindowBlur() {
     if (this.fileIsOver) this.onDragLeave(null)
   }
 
-  @HostListener('document:visibilitychange', ['$event'])
+  @HostListener('document:visibilitychange') public onVisibilityChange() {
-  public onVisibilityChange() {
     if (document.hidden && this.fileIsOver) this.onDragLeave(null)
   }
 }

src-ui/src/main.ts

@@ -2,6 +2,7 @@ import {
   APP_INITIALIZER,
   enableProdMode,
   importProvidersFrom,
+  provideZoneChangeDetection,
 } from '@angular/core'
 
 import { DragDropModule } from '@angular/cdk/drag-drop'
@@ -363,6 +364,7 @@ if (environment.production) {
 
 bootstrapApplication(AppComponent, {
   providers: [
+    provideZoneChangeDetection(),
     importProvidersFrom(
       BrowserModule,
       AppRoutingModule,

src-ui/tsconfig.spec.json

@@ -6,9 +6,11 @@
       "jest",
       "node",
     ],
-    "module": "commonjs",
+    "module": "NodeNext",
-    "emitDecoratorMetadata": true,
+    "moduleResolution": "NodeNext",
-    "allowJs": true
+    "emitDecoratorMetadata": false,
+    "allowJs": true,
+    "isolatedModules": true
   },
   "files": [
     "src/polyfills.ts"