Upgrading to Angular 20:

Replaced checked in package-lock.json by regenerated one.
Ran ng update @angular/core@20 @angular/cli@20
Ran npm install @angular-builders/jest@^20.0.0 @fortawesome/angular-fontawesome@^3.0.0 @swimlane/ngx-graph@^11
Ran npm install ngx-mat-select-search@^8.0.2.
Ran ng update @angular/material@20.
Updated all eslint and typescript to the latest versions.
Removed @angular-devkit/schematics.
Updated fontawesome.
Updated rxjs and tslib.
Moved required node version from 16 to 20.
Updated jest-preset-angular.
Set preserveWhitespaces to false.
Corrected two type declarations in two typescript files to make ng serve run without errors.
Removed unused angular-devkit/schematics from view-user.component.ts .
Updated list of supported browsers.
Upgraded prettier.
Ran prettier . --write the first time.
Ran prettier . --write the second time.
Ran ng generate @angular/core:inject with defaults, excepted a handful of files.
Fixed remaining eslint problems.
Added dist directory to ignores in eslint.config.js.
Let prettier fix formatting, almost everything is just line breaks.
Made htmlhint ignore @if and @for Angular constructs.
Updated node version in Github workflow to 22.12.0 (build.yml).
Updated .env.ts.
Updated Angular datetime format strings from YYYY-MM-DD to yyyy-MM-dd.
Merged changes from dev into angular20 branch.

src/app/configuration-wizard/completion-dialog/completion-dialog.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, Inject } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import {
   MatDialogRef,
   MAT_DIALOG_DATA,
@@ -30,8 +30,6 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class CompletionDialogComponent {
-  constructor(
-    public dialogRef: MatDialogRef<CompletionDialogComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: any
-  ) {}
+  dialogRef = inject<MatDialogRef<CompletionDialogComponent>>(MatDialogRef);
+  data = inject(MAT_DIALOG_DATA);
 }

src/app/configuration-wizard/configuration-wizard.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, Inject } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import {
   MatDialogRef,
   MAT_DIALOG_DATA,
@@ -31,12 +31,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ConfigurationWizardComponent {
+  dialogRef = inject<MatDialogRef<ConfigurationWizardComponent>>(MatDialogRef);
+  data = inject(MAT_DIALOG_DATA);
+
   show: number;
-  /**
-   * @param {MatDialogRef<ConfigurationWizardComponent>} dialogRef MatDialogRef<ConfigurationWizardComponent>.
-   */
-  constructor(
-    public dialogRef: MatDialogRef<ConfigurationWizardComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: any
-  ) {}
 }

src/app/configuration-wizard/continue-setup-dialog/continue-setup-dialog.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, Inject } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import {
   MatDialogRef,
   MAT_DIALOG_DATA,
@@ -28,16 +28,18 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ContinueSetupDialogComponent {
+  dialogRef = inject<MatDialogRef<ContinueSetupDialogComponent>>(MatDialogRef);
+  data = inject(MAT_DIALOG_DATA);
+
   /* Current Step Name*/
   stepName: number;
 
   /**
    * @param {MatDialogRef<ContinueSetupDialogComponent>} dialogRef MatDialogRef<ContinueSetupDialogComponent>.
    */
-  constructor(
-    public dialogRef: MatDialogRef<ContinueSetupDialogComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: any
-  ) {
+  constructor() {
+    const data = this.data;
+
     this.stepName = data.stepName;
   }
 }

src/app/configuration-wizard/next-step-dialog/next-step-dialog.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, Inject } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import {
   MatDialogRef,
   MAT_DIALOG_DATA,
@@ -30,6 +30,9 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class NextStepDialogComponent {
+  dialogRef = inject<MatDialogRef<NextStepDialogComponent>>(MatDialogRef);
+  data = inject(MAT_DIALOG_DATA);
+
   /* Step Percentage */
   stepPercentage: number;
   /* Next Step Name */
@@ -40,10 +43,9 @@ export class NextStepDialogComponent {
   /**
    * @param {MatDialogRef<NextStepDialogComponent>} dialogRef MatDialogRef<NextStepDialogComponent>.
    */
-  constructor(
-    public dialogRef: MatDialogRef<NextStepDialogComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: any
-  ) {
+  constructor() {
+    const data = this.data;
+
     this.stepPercentage = data.stepPercentage;
     this.nextStepName = data.nextStepName;
     this.previousStepName = data.previousStepName;

src/app/configuration-wizard/popover/popover-arrow.directive.ts

@@ -1,5 +1,5 @@
 /* Angular Imports */
-import { Directive, Renderer2, ElementRef, HostBinding, ChangeDetectorRef, OnDestroy } from '@angular/core';
+import { Directive, Renderer2, ElementRef, HostBinding, ChangeDetectorRef, OnDestroy, inject } from '@angular/core';
 
 /* rxjs Imports */
 import { Subscription } from 'rxjs';
@@ -13,6 +13,9 @@ import { PopoverRef } from './popover-ref';
  */
 @Directive({ selector: '[mifosxPopoverArrow]' })
 export class PopoverArrowDirective implements OnDestroy {
+  private popoverRef = inject(PopoverRef);
+  private cd = inject(ChangeDetectorRef);
+
   @HostBinding('style.width.px')
   @HostBinding('style.height.px')
   arrowSize: number;
@@ -35,10 +38,9 @@ export class PopoverArrowDirective implements OnDestroy {
    * @param {PopoverRef} popoverRef PopoverRef.
    * @param {ChangeDetectorRef} cd ChangeDetectorRef
    */
-  constructor(
-    private popoverRef: PopoverRef,
-    private cd: ChangeDetectorRef
-  ) {
+  constructor() {
+    const popoverRef = this.popoverRef;
+
     this.arrowSize = popoverRef.config.arrowSize;
 
     this.subscription = popoverRef.positionChanges().subscribe((p) => {

src/app/configuration-wizard/popover/popover-close.directive.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Directive, HostListener, Input, Optional } from '@angular/core';
+import { Directive, HostListener, Input, inject } from '@angular/core';
 
 /** Popover Ref */
 import { PopoverRef } from './popover-ref';
@@ -9,12 +9,9 @@ import { PopoverRef } from './popover-ref';
  */
 @Directive({ selector: '[mifosxPopoverClose]' })
 export class PopoverCloseDirective<T = any> {
-  @Input('mifosxPopoverClose') popoverResult: T;
+  private popoverRef = inject<PopoverRef<T>>(PopoverRef, { optional: true });
 
-  /**
-   * @param {PopoverRef<T>} popoverRef PopoverRef<T>.
-   */
-  constructor(@Optional() private popoverRef: PopoverRef<T>) {}
+  @Input('mifosxPopoverClose') popoverResult: T;
 
   @HostListener('click') onClick(): void {
     if (!this.popoverRef) {

src/app/configuration-wizard/popover/popover.service.ts

@@ -7,7 +7,7 @@ import {
   ConnectionPositionPair
 } from '@angular/cdk/overlay';
 import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
-import { Injectable, InjectionToken, Injector, TemplateRef, ElementRef } from '@angular/core';
+import { Injectable, InjectionToken, Injector, TemplateRef, ElementRef, inject } from '@angular/core';
 
 /* Custom Imports */
 import { PopoverConfig } from './popover-config';
@@ -35,14 +35,8 @@ const defaultConfig: PopoverConfig = {
   providedIn: 'root'
 })
 export class PopoverService {
-  /**
-   * @param {Injector} injector Injector.
-   * @param {overlay} overlay Overlay.
-   */
-  constructor(
-    private overlay: Overlay,
-    private injector: Injector
-  ) {}
+  private overlay = inject(Overlay);
+  private injector = inject(Injector);
 
   /**
    * Opens the popover at target element