Upgrade to Angular 16

update ngx-file-drop
Update ng-bootstrap, ng-select, cookie-service and ui-tour
Update setup-jest.ts
bump typescript to 5.1.6

bump ngx-color and tslib

src-ui/angular.json

@@ -159,7 +159,6 @@
       }
     }
   },
-  "defaultProject": "paperless-ui",
   "cli": {
     "schematicCollections": [
       "@angular-eslint/schematics"

src-ui/package.json

@@ -10,54 +10,54 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/common": "~15.2.8",
+    "@angular/common": "~16.1.3",
-    "@angular/compiler": "~15.2.8",
+    "@angular/compiler": "~16.1.3",
-    "@angular/core": "~15.2.8",
+    "@angular/core": "~16.1.3",
-    "@angular/forms": "~15.2.8",
+    "@angular/forms": "~16.1.3",
-    "@angular/localize": "~15.2.8",
+    "@angular/localize": "~16.1.3",
-    "@angular/platform-browser": "~15.2.8",
+    "@angular/platform-browser": "~16.1.3",
-    "@angular/platform-browser-dynamic": "~15.2.8",
+    "@angular/platform-browser-dynamic": "~16.1.3",
-    "@angular/router": "~15.2.8",
+    "@angular/router": "~16.1.3",
-    "@ng-bootstrap/ng-bootstrap": "^14.2.0",
+    "@ng-bootstrap/ng-bootstrap": "^15.0.1",
-    "@ng-select/ng-select": "^10.0.4",
+    "@ng-select/ng-select": "^11.0.0",
     "@ngneat/dirty-check-forms": "^3.0.3",
     "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.3.0",
     "file-saver": "^2.0.5",
     "mime-names": "^1.0.0",
     "ng2-pdf-viewer": "^9.1.5",
-    "ngx-color": "^8.0.3",
+    "ngx-color": "^9.0.0",
-    "ngx-cookie-service": "^15.0.0",
+    "ngx-cookie-service": "^16.0.0",
-    "ngx-file-drop": "^15.0.0",
+    "ngx-file-drop": "^16.0.0",
-    "ngx-ui-tour-ng-bootstrap": "^12.6.0",
+    "ngx-ui-tour-ng-bootstrap": "^13.0.2",
     "rxjs": "^7.8.1",
-    "tslib": "^2.5.2",
+    "tslib": "^2.6.0",
     "uuid": "^9.0.0",
     "zone.js": "^0.13.0"
   },
   "devDependencies": {
-    "@angular-builders/jest": "15.0.0",
+    "@angular-builders/jest": "16.0.0",
-    "@angular-devkit/build-angular": "~15.2.6",
+    "@angular-devkit/build-angular": "~16.1.3",
-    "@angular-eslint/builder": "15.2.1",
+    "@angular-eslint/builder": "16.0.3",
-    "@angular-eslint/eslint-plugin": "15.2.1",
+    "@angular-eslint/eslint-plugin": "16.0.3",
-    "@angular-eslint/eslint-plugin-template": "15.2.1",
+    "@angular-eslint/eslint-plugin-template": "16.0.3",
-    "@angular-eslint/schematics": "15.2.1",
+    "@angular-eslint/schematics": "16.0.3",
-    "@angular-eslint/template-parser": "15.2.1",
+    "@angular-eslint/template-parser": "16.0.3",
     "@angular/cli": "~16.1.3",
-    "@angular/compiler-cli": "~15.2.8",
+    "@angular/compiler-cli": "~16.1.3",
     "@playwright/test": "^1.35.1",
     "@types/jest": "^29.5.0",
     "@types/node": "^20.2.5",
-    "@typescript-eslint/eslint-plugin": "^5.59.8",
+    "@typescript-eslint/eslint-plugin": "^5.59.2",
-    "@typescript-eslint/parser": "^5.59.8",
+    "@typescript-eslint/parser": "^5.59.2",
     "concurrently": "^8.1.0",
-    "eslint": "^8.41.0",
+    "eslint": "^8.39.0",
-    "jest": "28.1.3",
+    "jest": "29.5.0",
     "jest-environment-jsdom": "^29.5.0",
-    "jest-preset-angular": "^12.2.6",
+    "jest-preset-angular": "^13.1.1",
     "jest-websocket-mock": "^2.4.0",
     "ts-node": "~10.9.1",
-    "typescript": "~4.9.5",
+    "typescript": "^5.1.6",
     "wait-on": "^7.0.1"
   }
 }

src-ui/setup-jest.ts

@@ -74,15 +74,6 @@ Object.defineProperty(window, 'getComputedStyle', {
 
 Object.defineProperty(window, 'ResizeObserver', { value: mock() })
 
-Object.defineProperty(document.body.style, 'transform', {
-  value: () => {
-    return {
-      enumerable: true,
-      configurable: true,
-    }
-  },
-})
-
 HTMLCanvasElement.prototype.getContext = <
   typeof HTMLCanvasElement.prototype.getContext
 >jest.fn()

src-ui/src/app/guards/dirty-doc.guard.ts

@@ -1,4 +1,3 @@
-import { CanDeactivate } from '@angular/router'
 import { Injectable } from '@angular/core'
 import { Observable } from 'rxjs'
 
@@ -7,7 +6,7 @@ export interface ComponentCanDeactivate {
 }
 
 @Injectable()
-export class DirtyDocGuard implements CanDeactivate<ComponentCanDeactivate> {
+export class DirtyDocGuard {
   canDeactivate(
     component: ComponentCanDeactivate
   ): boolean | Observable<boolean> {

src-ui/src/app/guards/dirty-saved-view.guard.ts

@@ -1,4 +1,3 @@
-import { CanDeactivate } from '@angular/router'
 import { Injectable } from '@angular/core'
 import { first, Observable, Subject } from 'rxjs'
 import { DocumentListComponent } from '../components/document-list/document-list.component'
@@ -8,9 +7,7 @@ import { SettingsService } from '../services/settings.service'
 import { SETTINGS_KEYS } from '../data/paperless-uisettings'
 
 @Injectable()
-export class DirtySavedViewGuard
+export class DirtySavedViewGuard {
-  implements CanDeactivate<DocumentListComponent>
-{
   constructor(
     private modalService: NgbModal,
     private settings: SettingsService

src-ui/src/app/guards/permissions.guard.ts

@@ -1,5 +1,4 @@
 import {
-  CanActivate,
   ActivatedRouteSnapshot,
   RouterStateSnapshot,
   UrlTree,
@@ -11,7 +10,7 @@ import { ToastService } from '../services/toast.service'
 import { TourService } from 'ngx-ui-tour-ng-bootstrap'
 
 @Injectable()
-export class PermissionsGuard implements CanActivate {
+export class PermissionsGuard {
   constructor(
     private permissionsService: PermissionsService,
     private router: Router,