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/series-detail/_components/series-detail/series-detail.component.ts

@@ -1,5 +1,18 @@
 import { DOCUMENT } from '@angular/common';
-import { Component, ElementRef, HostListener, OnDestroy, OnInit, ViewChild, Inject, ChangeDetectionStrategy, ChangeDetectorRef, AfterContentChecked, inject } from '@angular/core';
+import {
+  Component,
+  ElementRef,
+  HostListener,
+  OnDestroy,
+  OnInit,
+  ViewChild,
+  Inject,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  AfterContentChecked,
+  inject,
+  DestroyRef
+} from '@angular/core';
 import { FormGroup, FormControl } from '@angular/forms';
 import { Title } from '@angular/platform-browser';
 import { ActivatedRoute, Router } from '@angular/router';
@@ -42,6 +55,7 @@ import { ScrollService } from 'src/app/_services/scroll.service';
 import { SeriesService } from 'src/app/_services/series.service';
 import { ReviewSeriesModalComponent } from '../../_modals/review-series-modal/review-series-modal.component';
 import { PageLayoutMode } from 'src/app/_models/page-layout-mode';
+import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
 
 interface RelatedSeris {
   series: Series;
@@ -68,10 +82,11 @@ interface StoryLineItem {
   styleUrls: ['./series-detail.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class SeriesDetailComponent implements OnInit, OnDestroy, AfterContentChecked {
+export class SeriesDetailComponent implements OnInit, AfterContentChecked {
 
   @ViewChild('scrollingBlock') scrollingBlock: ElementRef<HTMLDivElement> | undefined;
   @ViewChild('companionBar') companionBar: ElementRef<HTMLDivElement> | undefined;
+  private readonly destroyRef = inject(DestroyRef);
 
   /**
    * Series Id. Set at load before UI renders
@@ -117,7 +132,7 @@ export class SeriesDetailComponent implements OnInit, OnDestroy, AfterContentChe
   downloadInProgress: boolean = false;
 
   itemSize: number = 10; // when 10 done, 16 loads
-  
+
   /**
    * Track by function for Volume to tell when to refresh card data
    */
@@ -207,9 +222,6 @@ export class SeriesDetailComponent implements OnInit, OnDestroy, AfterContentChe
     }
   }
 
-  private onDestroy: Subject<void> = new Subject();
-
-
   get LibraryType() {
     return LibraryType;
   }
@@ -301,7 +313,7 @@ export class SeriesDetailComponent implements OnInit, OnDestroy, AfterContentChe
       return;
     }
 
-    this.messageHub.messages$.pipe(takeUntil(this.onDestroy)).subscribe(event => {
+    this.messageHub.messages$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(event => {
       if (event.event === EVENTS.SeriesRemoved) {
         const seriesRemovedEvent = event.payload as SeriesRemovedEvent;
         if (seriesRemovedEvent.seriesId === this.seriesId) {
@@ -322,18 +334,13 @@ export class SeriesDetailComponent implements OnInit, OnDestroy, AfterContentChe
     this.changeDetectionRef.markForCheck();
     this.loadSeries(this.seriesId);
 
-    this.pageExtrasGroup.get('renderMode')?.valueChanges.pipe(takeUntil(this.onDestroy)).subscribe((val: PageLayoutMode | null) => {
+    this.pageExtrasGroup.get('renderMode')?.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((val: PageLayoutMode | null) => {
       if (val == null) return;
       this.renderMode = val;
       this.changeDetectionRef.markForCheck();
     });
   }
 
-  ngOnDestroy() {
-    this.onDestroy.next();
-    this.onDestroy.complete();
-  }
-
   @HostListener('document:keydown.shift', ['$event'])
   handleKeypress(event: KeyboardEvent) {
     if (event.key === KEY_CODES.SHIFT) {
@@ -543,7 +550,7 @@ export class SeriesDetailComponent implements OnInit, OnDestroy, AfterContentChe
         if (detail == null) return;
         this.unreadCount = detail.unreadCount;
         this.totalCount = detail.totalCount;
-        
+
         this.hasSpecials = detail.specials.length > 0;
         this.specials = detail.specials;
 
@@ -792,7 +799,7 @@ export class SeriesDetailComponent implements OnInit, OnDestroy, AfterContentChe
     } else {
       this.actionService.addMultipleSeriesToWantToReadList([this.series.id]);
     }
-   
+
     this.isWantToRead = !this.isWantToRead;
     this.changeDetectionRef.markForCheck();
   }

UI/Web/src/app/series-detail/_components/series-metadata-detail/series-metadata-detail.component.ts

@@ -20,13 +20,13 @@ import { ImageService } from 'src/app/_services/image.service';
 })
 export class SeriesMetadataDetailComponent implements OnChanges {
 
-  @Input() seriesMetadata!: SeriesMetadata;
+  @Input({required: true}) seriesMetadata!: SeriesMetadata;
   @Input() hasReadingProgress: boolean = false;
   /**
    * Reading lists with a connection to the Series
    */
   @Input() readingLists: Array<ReadingList> = [];
-  @Input() series!: Series;
+  @Input({required: true}) series!: Series;
 
   isCollapsed: boolean = true;
   hasExtendedProperties: boolean = false;

UI/Web/src/app/series-detail/_modals/review-series-modal/review-series-modal.component.ts

@@ -12,7 +12,7 @@ import { SeriesService } from 'src/app/_services/series.service';
 })
 export class ReviewSeriesModalComponent implements OnInit {
 
-  @Input() series!: Series;
+  @Input({required: true}) series!: Series;
   reviewGroup!: FormGroup;
 
   constructor(public modal: NgbActiveModal, private seriesService: SeriesService, private readonly cdRef: ChangeDetectorRef) {}