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/organization/loan-provisioning-criteria/common-resolvers/loan-provisioning-criteria-and-template.resolver.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
@@ -13,10 +13,7 @@ import { OrganizationService } from '../../organization.service';
  */
 @Injectable()
 export class LoanProvisioningCriteriaAndTemplateResolver {
-  /**
-   * @param {OrganizationService} organizationService Products service.
-   */
-  constructor(private organizationService: OrganizationService) {}
+  private organizationService = inject(OrganizationService);
 
   /**
    * Returns the Pprovisioning criteria and template data.

src/app/organization/loan-provisioning-criteria/common-resolvers/loan-provisioning-criteria-template.resolver.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,10 +12,7 @@ import { OrganizationService } from '../../organization.service';
  */
 @Injectable()
 export class LoanProvisioningCriteriaTemplateResolver {
-  /**
-   * @param {OrganizationService} organizationService Products service.
-   */
-  constructor(private organizationService: OrganizationService) {}
+  private organizationService = inject(OrganizationService);
 
   /**
    * Returns the Pprovisioning criteria template

src/app/organization/loan-provisioning-criteria/common-resolvers/loan-provisioning-criteria.resolver.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
@@ -13,10 +13,7 @@ import { OrganizationService } from '../../organization.service';
  */
 @Injectable()
 export class LoanProvisioningCriteriaResolver {
-  /**
-   * @param {OrganizationService} organizationService Organization service.
-   */
-  constructor(private organizationService: OrganizationService) {}
+  private organizationService = inject(OrganizationService);
 
   /**
    * Returns the loan provisioning criteria data.

src/app/organization/loan-provisioning-criteria/common-resolvers/loan-provisioning-criterias.resolver.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,10 +12,7 @@ import { OrganizationService } from '../../organization.service';
  */
 @Injectable()
 export class LoanProvisioningCriteriasResolver {
-  /**
-   * @param {OrganizationService} organizationService Products service.
-   */
-  constructor(private organizationService: OrganizationService) {}
+  private organizationService = inject(OrganizationService);
 
   /**
    * Returns the products data.

src/app/organization/loan-provisioning-criteria/create-loan-provisioning-criteria/create-loan-provisioning-criteria.component.html

@@ -6,32 +6,38 @@
           <mat-form-field class="flex-fill">
             <mat-label>{{ 'labels.inputs.Provisioning Criteria' | translate }}</mat-label>
             <input required matInput formControlName="criteriaName" />
-            <mat-error *ngIf="provisioningCriteriaForm.controls.criteriaName.hasError('required')">
-              {{ 'labels.inputs.Provisioning Criteria' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (provisioningCriteriaForm.controls.criteriaName.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Provisioning Criteria' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field class="flex-fill">
             <mat-label>{{ 'labels.inputs.Selected Products' | translate }}</mat-label>
             <mat-select formControlName="loanProducts" multiple>
-              <mat-option *ngFor="let product of loanProvisioningCriteriaTemplate.loanProducts" [value]="product">
-                {{ product.name }}
-              </mat-option>
+              @for (product of loanProvisioningCriteriaTemplate.loanProducts; track product) {
+                <mat-option [value]="product">
+                  {{ product.name }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="provisioningCriteriaForm.controls.loanProducts.hasError('required')">
-              {{ 'labels.inputs.Selected Products' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (provisioningCriteriaForm.controls.loanProducts.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Selected Products' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
         </div>
       </form>
     </div>
 
     <div class="mat-elevation-z1">
-      <mat-hint *ngIf="!provisioningCriteriaFormValid">
-        {{ 'labels.text.Provisioning criteria definitions' | translate }}</mat-hint
-      >
+      @if (!provisioningCriteriaFormValid) {
+        <mat-hint> {{ 'labels.text.Provisioning criteria definitions' | translate }}</mat-hint>
+      }
 
       <table mat-table class="m-t-10" [dataSource]="definitions">
         <ng-container matColumnDef="category">

src/app/organization/loan-provisioning-criteria/create-loan-provisioning-criteria/create-loan-provisioning-criteria.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import {
@@ -58,6 +58,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class CreateLoanProvisioningCriteriaComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private organizationService = inject(OrganizationService);
+  private settingsService = inject(SettingsService);
+  private router = inject(Router);
+  dialog = inject(MatDialog);
+  private route = inject(ActivatedRoute);
+
   /** Loan Provisioning Criteria form. */
   provisioningCriteriaForm: UntypedFormGroup;
   /** Loan Provisioning Criteria Template */
@@ -98,14 +105,7 @@ export class CreateLoanProvisioningCriteriaComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route.
    * @param {Router} router Router for navigation.
    */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private organizationService: OrganizationService,
-    private settingsService: SettingsService,
-    private router: Router,
-    public dialog: MatDialog,
-    private route: ActivatedRoute
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { loanProvisioningCriteriaTemplate: any }) => {
       this.loanProvisioningCriteriaTemplate = data.loanProvisioningCriteriaTemplate;
       this.definitions = this.loanProvisioningCriteriaTemplate.definitions;

src/app/organization/loan-provisioning-criteria/edit-loan-provisioning-criteria/edit-loan-provisioning-criteria.component.html

@@ -6,18 +6,22 @@
           <mat-form-field class="flex-fill">
             <mat-label>{{ 'labels.inputs.Provisioning Criteria' | translate }}</mat-label>
             <input required matInput formControlName="criteriaName" />
-            <mat-error *ngIf="provisioningCriteriaForm.controls.criteriaName.hasError('required')">
-              {{ 'labels.inputs.Provisioning Criteria' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (provisioningCriteriaForm.controls.criteriaName.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Provisioning Criteria' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field class="flex-fill">
             <mat-label>{{ 'labels.inputs.Selected Products' | translate }}</mat-label>
             <mat-select formControlName="loanProducts" [compareWith]="compareOptions" multiple>
-              <mat-option *ngFor="let product of loanProducts" [value]="product">
-                {{ product.name }}
-              </mat-option>
+              @for (product of loanProducts; track product) {
+                <mat-option [value]="product">
+                  {{ product.name }}
+                </mat-option>
+              }
             </mat-select>
           </mat-form-field>
         </div>
@@ -25,9 +29,9 @@
     </div>
 
     <div class="mat-elevation-z1">
-      <mat-hint *ngIf="!provisioningCriteriaFormValid">{{
-        'labels.text.Provisioning criteria definitions' | translate
-      }}</mat-hint>
+      @if (!provisioningCriteriaFormValid) {
+        <mat-hint>{{ 'labels.text.Provisioning criteria definitions' | translate }}</mat-hint>
+      }
 
       <table mat-table class="m-t-10" [dataSource]="definitions">
         <ng-container matColumnDef="category">

src/app/organization/loan-provisioning-criteria/edit-loan-provisioning-criteria/edit-loan-provisioning-criteria.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import {
@@ -58,6 +58,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class EditLoanProvisioningCriteriaComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private organizationService = inject(OrganizationService);
+  private router = inject(Router);
+  private settingsService = inject(SettingsService);
+  dialog = inject(MatDialog);
+  private route = inject(ActivatedRoute);
+
   /** Loan Provisioning Criteria form. */
   provisioningCriteriaForm: UntypedFormGroup;
   /** Loan Provisioning Criteria Template */
@@ -98,14 +105,7 @@ export class EditLoanProvisioningCriteriaComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route.
    * @param {Router} router Router for navigation.
    */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private organizationService: OrganizationService,
-    private router: Router,
-    private settingsService: SettingsService,
-    public dialog: MatDialog,
-    private route: ActivatedRoute
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { loanProvisioningCriteriaAndTemplate: any }) => {
       this.loanProvisioningCriteriaAndTemplate = data.loanProvisioningCriteriaAndTemplate;
       this.definitions = this.loanProvisioningCriteriaAndTemplate.definitions;

src/app/organization/loan-provisioning-criteria/loan-provisioning-criteria.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild, inject } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort, MatSortHeader } from '@angular/material/sort';
 import {
@@ -48,6 +48,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class LoanProvisioningCriteriaComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+
   /** Loan Provisioning Criteria data. */
   loanProvisioningCriteriaData: any;
   /** Columns to be displayed in loan provisioning criteria table. */
@@ -67,7 +69,7 @@ export class LoanProvisioningCriteriaComponent implements OnInit {
    * Retrieves the loan provisioning criteria data from `resolve`.
    * @param {ActivatedRoute} route Activated Route.
    */
-  constructor(private route: ActivatedRoute) {
+  constructor() {
     this.route.data.subscribe((data: { loanProvisioningCriterias: any }) => {
       this.loanProvisioningCriteriaData = data.loanProvisioningCriterias;
     });

src/app/organization/loan-provisioning-criteria/view-loan-provisioning-criteria/view-loan-provisioning-criteria.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { Router, ActivatedRoute, RouterLink } from '@angular/router';
 import {
@@ -51,6 +51,11 @@ import { LoanProduct } from 'app/products/loan-products/models/loan-product.mode
   ]
 })
 export class ViewLoanProvisioningCriteriaComponent implements OnInit {
+  private organizationService = inject(OrganizationService);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  dialog = inject(MatDialog);
+
   /** Loan Provisioning data. */
   provisioningData: any;
   /** Loan Product String. */
@@ -74,12 +79,7 @@ export class ViewLoanProvisioningCriteriaComponent implements OnInit {
    * @param {Router} router Router for navigation.
    * @param {MatDialog} dialog Dialog reference.
    */
-  constructor(
-    private organizationService: OrganizationService,
-    private route: ActivatedRoute,
-    private router: Router,
-    public dialog: MatDialog
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { loanProvisioningCriteria: any }) => {
       this.provisioningData = data.loanProvisioningCriteria;
     });