Angular 16 (#2007)

* Removed adv, which isn't needed.

* Updated zone

* Updated to angular 16

* Updated to angular 16 (partially)

* Updated to angular 16

* Package update for Angular 16 (and other dependencies) is complete.

* Replaced all takeUntil(this.onDestroy) with new takeUntilDestroyed()

* Updated all inputs that have ! to be required and deleted all unit tests.

* Corrected how takeUntilDestroyed() is supposed to be implemented.

UI/Web/src/app/admin/_modals/reset-password-modal/reset-password-modal.component.ts

@@ -11,7 +11,7 @@ import { AccountService } from 'src/app/_services/account.service';
 })
 export class ResetPasswordModalComponent {
 
-  @Input() member!: Member;
+  @Input({required: true}) member!: Member;
   errorMessage = '';
   resetPasswordForm: FormGroup = new FormGroup({
     password: new FormControl('', [Validators.required]),

UI/Web/src/app/admin/edit-user/edit-user.component.ts

@@ -13,8 +13,8 @@ import { AccountService } from 'src/app/_services/account.service';
 })
 export class EditUserComponent implements OnInit {
 
-  @Input() member!: Member;
-  
+  @Input({required: true}) member!: Member;
+
   selectedRoles: Array<string> = [];
   selectedLibraries: Array<number> = [];
   selectedRestriction!: AgeRestriction;

UI/Web/src/app/admin/manage-alerts/manage-alerts.component.ts

@@ -1,10 +1,22 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, OnInit, Output, QueryList, ViewChildren, inject } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  OnInit,
+  Output,
+  QueryList,
+  ViewChildren,
+  inject,
+  DestroyRef
+} from '@angular/core';
 import { BehaviorSubject, Observable, Subject, combineLatest, filter, map, shareReplay, takeUntil } from 'rxjs';
 import { SortEvent, SortableHeader, compare } from 'src/app/_single-module/table/_directives/sortable-header.directive';
 import { KavitaMediaError } from '../_models/media-error';
 import { ServerService } from 'src/app/_services/server.service';
 import { EVENTS, MessageHubService } from 'src/app/_services/message-hub.service';
 import { FormControl, FormGroup } from '@angular/forms';
+import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
 
 @Component({
   selector: 'app-manage-alerts',
@@ -16,12 +28,12 @@ export class ManageAlertsComponent implements OnInit {
 
   @Output() alertCount = new EventEmitter<number>();
   @ViewChildren(SortableHeader<KavitaMediaError>) headers!: QueryList<SortableHeader<KavitaMediaError>>;
-  private readonly serverService = inject(ServerService); 
-  private readonly messageHub = inject(MessageHubService); 
-  private readonly cdRef = inject(ChangeDetectorRef); 
-  private readonly onDestroy = new Subject<void>();
+  private readonly serverService = inject(ServerService);
+  private readonly messageHub = inject(MessageHubService);
+  private readonly cdRef = inject(ChangeDetectorRef);
+  private readonly destroyRef = inject(DestroyRef);
 
-  messageHubUpdate$ = this.messageHub.messages$.pipe(takeUntil(this.onDestroy), filter(m => m.event === EVENTS.ScanSeries), shareReplay());
+  messageHubUpdate$ = this.messageHub.messages$.pipe(takeUntilDestroyed(this.destroyRef), filter(m => m.event === EVENTS.ScanSeries), shareReplay());
   currentSort = new BehaviorSubject<SortEvent<KavitaMediaError>>({column: 'extension', direction: 'asc'});
   currentSort$: Observable<SortEvent<KavitaMediaError>> = this.currentSort.asObservable();
 
@@ -30,7 +42,7 @@ export class ManageAlertsComponent implements OnInit {
   formGroup = new FormGroup({
     filter: new FormControl('', [])
   });
-  
+
 
   constructor() {}
 

UI/Web/src/app/admin/manage-library/manage-library.component.ts

@@ -1,4 +1,12 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  DestroyRef,
+  inject,
+  OnDestroy,
+  OnInit
+} from '@angular/core';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { ToastrService } from 'ngx-toastr';
 import { Subject } from 'rxjs';
@@ -10,6 +18,7 @@ import { ScanSeriesEvent } from 'src/app/_models/events/scan-series-event';
 import { Library } from 'src/app/_models/library';
 import { LibraryService } from 'src/app/_services/library.service';
 import { EVENTS, Message, MessageHubService } from 'src/app/_services/message-hub.service';
+import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
 
 @Component({
   selector: 'app-manage-library',
@@ -17,7 +26,7 @@ import { EVENTS, Message, MessageHubService } from 'src/app/_services/message-hu
   styleUrls: ['./manage-library.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class ManageLibraryComponent implements OnInit, OnDestroy {
+export class ManageLibraryComponent implements OnInit {
 
   libraries: Library[] = [];
   loading = false;
@@ -26,10 +35,9 @@ export class ManageLibraryComponent implements OnInit, OnDestroy {
    */
   deletionInProgress: boolean = false;
   libraryTrackBy = (index: number, item: Library) => `${item.name}_${item.lastScanned}_${item.type}_${item.folders.length}`;
+  private readonly destroyRef = inject(DestroyRef);
 
-  private readonly onDestroy = new Subject<void>();
-
-  constructor(private modalService: NgbModal, private libraryService: LibraryService, 
+  constructor(private modalService: NgbModal, private libraryService: LibraryService,
     private toastr: ToastrService, private confirmService: ConfirmService,
     private hubService: MessageHubService, private readonly cdRef: ChangeDetectorRef) { }
 
@@ -37,10 +45,10 @@ export class ManageLibraryComponent implements OnInit, OnDestroy {
     this.getLibraries();
 
     // when a progress event comes in, show it on the UI next to library
-    this.hubService.messages$.pipe(takeUntil(this.onDestroy), 
-      filter(event => event.event === EVENTS.ScanSeries || event.event === EVENTS.NotificationProgress), 
-      distinctUntilChanged((prev: Message<ScanSeriesEvent | NotificationProgressEvent>, curr: Message<ScanSeriesEvent | NotificationProgressEvent>) => 
-        this.hasMessageChanged(prev, curr))) 
+    this.hubService.messages$.pipe(takeUntilDestroyed(this.destroyRef),
+      filter(event => event.event === EVENTS.ScanSeries || event.event === EVENTS.NotificationProgress),
+      distinctUntilChanged((prev: Message<ScanSeriesEvent | NotificationProgressEvent>, curr: Message<ScanSeriesEvent | NotificationProgressEvent>) =>
+        this.hasMessageChanged(prev, curr)))
       .subscribe((event: Message<ScanSeriesEvent | NotificationProgressEvent>) => {
         let libId = 0;
         if (event.event === EVENTS.ScanSeries) {
@@ -62,11 +70,6 @@ export class ManageLibraryComponent implements OnInit, OnDestroy {
     });
   }
 
-  ngOnDestroy() {
-    this.onDestroy.next();
-    this.onDestroy.complete();
-  }
-
   hasMessageChanged(prev: Message<ScanSeriesEvent | NotificationProgressEvent>, curr: Message<ScanSeriesEvent | NotificationProgressEvent>) {
     if (curr.event !== prev.event) return true;
     if (curr.event === EVENTS.ScanSeries) {
@@ -91,7 +94,7 @@ export class ManageLibraryComponent implements OnInit, OnDestroy {
   editLibrary(library: Library) {
     const modalRef = this.modalService.open(LibrarySettingsModalComponent, {  size: 'xl' });
     modalRef.componentInstance.library = library;
-    modalRef.closed.pipe(takeUntil(this.onDestroy)).subscribe(refresh => {
+    modalRef.closed.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(refresh => {
       if (refresh) {
         this.getLibraries();
       }
@@ -100,7 +103,7 @@ export class ManageLibraryComponent implements OnInit, OnDestroy {
 
   addLibrary() {
     const modalRef = this.modalService.open(LibrarySettingsModalComponent, {  size: 'xl' });
-    modalRef.closed.pipe(takeUntil(this.onDestroy)).subscribe(refresh => {
+    modalRef.closed.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(refresh => {
       if (refresh) {
         this.getLibraries();
       }