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/shared/image/image.component.ts

@@ -1,9 +1,21 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Input, OnChanges, OnDestroy, Renderer2, ViewChild } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component, DestroyRef,
+  ElementRef,
+  inject,
+  Input,
+  OnChanges,
+  OnDestroy,
+  Renderer2,
+  ViewChild
+} from '@angular/core';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { CoverUpdateEvent } from 'src/app/_models/events/cover-update-event';
 import { ImageService } from 'src/app/_services/image.service';
 import { EVENTS, MessageHubService } from 'src/app/_services/message-hub.service';
+import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
 
 /**
  * This is used for images with placeholder fallback.
@@ -14,12 +26,12 @@ import { EVENTS, MessageHubService } from 'src/app/_services/message-hub.service
   styleUrls: ['./image.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class ImageComponent implements OnChanges, OnDestroy {
+export class ImageComponent implements OnChanges {
 
   /**
    * Source url to load image
    */
-  @Input() imageUrl!: string;
+  @Input({required: true}) imageUrl!: string;
   /**
    * Width of the image. If not defined, will not be applied
    */
@@ -54,11 +66,10 @@ export class ImageComponent implements OnChanges, OnDestroy {
    @Input() processEvents: boolean = true;
 
   @ViewChild('img', {static: true}) imgElem!: ElementRef<HTMLImageElement>;
-
-  private readonly onDestroy = new Subject<void>();
+  private readonly destroyRef = inject(DestroyRef);
 
   constructor(public imageService: ImageService, private renderer: Renderer2, private hubService: MessageHubService, private changeDetectionRef: ChangeDetectorRef) {
-    this.hubService.messages$.pipe(takeUntil(this.onDestroy)).subscribe(res => {
+    this.hubService.messages$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(res => {
       if (!this.processEvents) return;
       if (res.event === EVENTS.CoverUpdate) {
         const updateEvent = res.payload as CoverUpdateEvent;
@@ -111,9 +122,4 @@ export class ImageComponent implements OnChanges, OnDestroy {
     }
   }
 
-  ngOnDestroy() {
-    this.onDestroy.next();
-    this.onDestroy.complete();
-  }
-
 }

UI/Web/src/app/shared/person-badge/person-badge.component.ts

@@ -9,7 +9,7 @@ import { Person } from '../../_models/metadata/person';
 })
 export class PersonBadgeComponent {
 
-  @Input() person!: Person;
+  @Input({required: true}) person!: Person;
 
   constructor() { }
 }

UI/Web/src/app/shared/read-more/read-more.component.ts

@@ -10,7 +10,7 @@ export class ReadMoreComponent implements OnChanges {
   /**
    * String to apply readmore on
    */
-  @Input() text!: string;
+  @Input({required: true}) text!: string;
   /**
    * Max length before apply read more. Defaults to 250 characters.
    */

UI/Web/src/app/shared/update-notification/update-notification-modal.component.ts

@@ -12,7 +12,7 @@ import { UpdateVersionEvent } from 'src/app/_models/events/update-version-event'
 })
 export class UpdateNotificationModalComponent {
 
-  @Input() updateData!: UpdateVersionEvent;
+  @Input({required: true}) updateData!: UpdateVersionEvent;
 
   constructor(public modal: NgbActiveModal) { }