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/reading-list/_components/draggable-ordered-list/draggable-ordered-list.component.ts

@@ -54,7 +54,7 @@ export class DraggableOrderedListComponent {
   }
 
   updateIndex(previousIndex: number, item: any) {
-    // get the new value of the input 
+    // get the new value of the input
     var inputElem = <HTMLInputElement>document.querySelector('#reorder-' + previousIndex);
     const newIndex = parseInt(inputElem.value, 10);
     if (previousIndex === newIndex)  return;

UI/Web/src/app/reading-list/_components/reading-list-item/reading-list-item.component.ts

@@ -12,7 +12,7 @@ import { ImageService } from 'src/app/_services/image.service';
 })
 export class ReadingListItemComponent {
 
-  @Input() item!: ReadingListItem;
+  @Input({required: true}) item!: ReadingListItem;
   @Input() position: number = 0;
   @Input() libraryTypes: {[key: number]: LibraryType} = {};
   /**

UI/Web/src/app/reading-list/_modals/add-to-list-modal/add-to-list-modal.component.ts

@@ -20,7 +20,7 @@ export enum ADD_FLOW {
 })
 export class AddToListModalComponent implements OnInit, AfterViewInit {
 
-  @Input() title!: string;
+  @Input({required: true}) title!: string;
   /**
    * Only used in Series flow
    */
@@ -49,7 +49,7 @@ export class AddToListModalComponent implements OnInit, AfterViewInit {
   /**
    * Determines which Input is required and which API is used to associate to the Reading List
    */
-  @Input() type!: ADD_FLOW;
+  @Input({required: true}) type!: ADD_FLOW;
 
   /**
    * All existing reading lists sorted by recent use date
@@ -71,14 +71,14 @@ export class AddToListModalComponent implements OnInit, AfterViewInit {
 
     this.listForm.addControl('title', new FormControl(this.title, []));
     this.listForm.addControl('filterQuery', new FormControl('', []));
-    
+
     this.loading = true;
     this.readingListService.getReadingLists(false, true).subscribe(lists => {
       this.lists = lists.result;
       this.loading = false;
     });
 
-    
+
   }
 
   ngAfterViewInit() {
@@ -130,6 +130,6 @@ export class AddToListModalComponent implements OnInit, AfterViewInit {
         this.modal.close();
       });
     }
-    
+
   }
 }

UI/Web/src/app/reading-list/_modals/edit-reading-list-modal/edit-reading-list-modal.component.ts

@@ -1,4 +1,13 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  DestroyRef,
+  inject,
+  Input,
+  OnDestroy,
+  OnInit
+} from '@angular/core';
 import { FormGroup, FormControl, Validators } from '@angular/forms';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { ToastrService } from 'ngx-toastr';
@@ -9,6 +18,7 @@ import { AccountService } from 'src/app/_services/account.service';
 import { ImageService } from 'src/app/_services/image.service';
 import { ReadingListService } from 'src/app/_services/reading-list.service';
 import { UploadService } from 'src/app/_services/upload.service';
+import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
 
 enum TabID {
   General = 'General',
@@ -21,9 +31,10 @@ enum TabID {
   styleUrls: ['./edit-reading-list-modal.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class EditReadingListModalComponent implements OnInit, OnDestroy {
+export class EditReadingListModalComponent implements OnInit {
 
-  @Input() readingList!: ReadingList;
+  @Input({required: true}) readingList!: ReadingList;
+  private readonly destroyRef = inject(DestroyRef);
   reviewGroup!: FormGroup;
 
   coverImageIndex: number = 0;
@@ -35,13 +46,11 @@ export class EditReadingListModalComponent implements OnInit, OnDestroy {
   imageUrls: Array<string> = [];
   active = TabID.General;
 
-  private readonly onDestroy = new Subject<void>();
-
   get Breakpoint() { return Breakpoint; }
   get TabID() { return TabID; }
 
-  constructor(private ngModal: NgbActiveModal, private readingListService: ReadingListService, 
-    public utilityService: UtilityService, private uploadService: UploadService, private toastr: ToastrService, 
+  constructor(private ngModal: NgbActiveModal, private readingListService: ReadingListService,
+    public utilityService: UtilityService, private uploadService: UploadService, private toastr: ToastrService,
     private imageService: ImageService, private readonly cdRef: ChangeDetectorRef, public accountService: AccountService) { }
 
   ngOnInit(): void {
@@ -58,7 +67,7 @@ export class EditReadingListModalComponent implements OnInit, OnDestroy {
     this.coverImageLocked = this.readingList.coverImageLocked;
 
     this.reviewGroup.get('title')?.valueChanges.pipe(
-      debounceTime(100), 
+      debounceTime(100),
       distinctUntilChanged(),
       switchMap(name => this.readingListService.nameExists(name)),
       tap(exists => {
@@ -66,11 +75,11 @@ export class EditReadingListModalComponent implements OnInit, OnDestroy {
         if (!exists || isExistingName) {
           this.reviewGroup.get('title')?.setErrors(null);
         } else {
-          this.reviewGroup.get('title')?.setErrors({duplicateName: true})  
+          this.reviewGroup.get('title')?.setErrors({duplicateName: true})
         }
         this.cdRef.markForCheck();
       }),
-      takeUntil(this.onDestroy)
+      takeUntilDestroyed(this.destroyRef)
       ).subscribe();
 
     this.imageUrls.push(this.imageService.randomize(this.imageService.getReadingListCoverImage(this.readingList.id)));
@@ -83,11 +92,6 @@ export class EditReadingListModalComponent implements OnInit, OnDestroy {
     }
   }
 
-  ngOnDestroy() {
-    this.onDestroy.next();
-    this.onDestroy.complete();
-  }
-
   close() {
     this.ngModal.dismiss(undefined);
   }
@@ -101,11 +105,11 @@ export class EditReadingListModalComponent implements OnInit, OnDestroy {
     model.endingMonth = model.endingMonth || 0;
     model.endingYear = model.endingYear || 0;
     const apis = [this.readingListService.update(model)];
-    
+
     if (this.selectedCover !== '') {
       apis.push(this.uploadService.updateReadingListCoverImage(this.readingList.id, this.selectedCover))
     }
-  
+
     forkJoin(apis).subscribe(results => {
       this.readingList.title = model.title;
       this.readingList.summary = model.summary;