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/accounting/provisioning-entries/create-provisioning-entry/create-provisioning-entry.component.html

@@ -15,10 +15,12 @@
             />
             <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
             <mat-datepicker #datePicker></mat-datepicker>
-            <mat-error *ngIf="provisioningEntryForm.controls.date.hasError('required')">
-              {{ 'labels.inputs.Date' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (provisioningEntryForm.controls.date.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Date' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <div class="flex-fill">

src/app/accounting/provisioning-entries/create-provisioning-entry/create-provisioning-entry.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 { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
@@ -22,6 +22,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class CreateProvisioningEntryComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private accountingService = inject(AccountingService);
+  private settingsService = inject(SettingsService);
+  private dateUtils = inject(Dates);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+
   /** Minimum provisioning date allowed. */
   minDate = new Date(2000, 0, 1);
   /** Maximum provisioning date allowed. */
@@ -29,22 +36,6 @@ export class CreateProvisioningEntryComponent implements OnInit {
   /** Provisioning entry form. */
   provisioningEntryForm: UntypedFormGroup;
 
-  /**
-   * @param {FormBuilder} formBuilder Form Builder.
-   * @param {AccountingService} accountingService Accounting Service.
-   * @param {SettingsService} settingsService Settings Service.
-   * @param {ActivatedRoute} route Activated Route.
-   * @param {Router} router Router for navigation.
-   */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private accountingService: AccountingService,
-    private settingsService: SettingsService,
-    private dateUtils: Dates,
-    private route: ActivatedRoute,
-    private router: Router
-  ) {}
-
   /**
    * Creates the provisioning entry form.
    */

src/app/accounting/provisioning-entries/provisioning-entries.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 {
@@ -50,6 +50,10 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ProvisioningEntriesComponent implements OnInit {
+  private accountingService = inject(AccountingService);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+
   /** Provisioning entry data. */
   provisioningEntryData: any;
   /** Columns to be displayed in provisioning entries table. */
@@ -75,11 +79,7 @@ export class ProvisioningEntriesComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route.
    * @param {Router} router Router for navigation.
    */
-  constructor(
-    private accountingService: AccountingService,
-    private route: ActivatedRoute,
-    private router: Router
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { provisioningEntries: any }) => {
       this.provisioningEntryData = data.provisioningEntries.pageItems;
     });

src/app/accounting/provisioning-entries/provisioning-entries.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 { AccountingService } from '../accounting.service';
  */
 @Injectable()
 export class ProvisioningEntriesResolver {
-  /**
-   * @param {AccountingService} accountingService Accounting service.
-   */
-  constructor(private accountingService: AccountingService) {}
+  private accountingService = inject(AccountingService);
 
   /**
    * Returns the provisioning entries data.

src/app/accounting/provisioning-entries/view-provisioning-entry/provisioning-entry-entries.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 { AccountingService } from '../../accounting.service';
  */
 @Injectable()
 export class ProvisioningEntryEntriesResolver {
-  /**
-   * @param {AccountingService} accountingService Accounting service.
-   */
-  constructor(private accountingService: AccountingService) {}
+  private accountingService = inject(AccountingService);
 
   /**
    * Returns the provisioning entry entries data.

src/app/accounting/provisioning-entries/view-provisioning-entry/provisioning-entry.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 { AccountingService } from '../../accounting.service';
  */
 @Injectable()
 export class ProvisioningEntryResolver {
-  /**
-   * @param {AccountingService} accountingService Accounting service.
-   */
-  constructor(private accountingService: AccountingService) {}
+  private accountingService = inject(AccountingService);
 
   /**
    * Returns the provisioning entry data.

src/app/accounting/provisioning-entries/view-provisioning-entry/view-provisioning-entry.component.html

@@ -1,46 +1,43 @@
-<div class="container" *ngIf="provisioningEntry">
-  <div class="m-b-20 layout-row align-end gap-20px">
-    <button
-      mat-raised-button
-      color="primary"
-      (click)="createProvisioningJournalEntries()"
-      [disabled]="provisioningEntry.journalEntry"
-      *mifosxHasPermission="'CREATE_JOURNAL_ENTRY'"
-    >
-      <fa-icon icon="plus" class="m-r-10"></fa-icon>
-      {{ 'labels.buttons.Create Journal Entries' | translate }}
-    </button>
+@if (provisioningEntry) {
+  <div class="container">
+    <div class="m-b-20 layout-row align-end gap-20px">
+      <button
+        mat-raised-button
+        color="primary"
+        (click)="createProvisioningJournalEntries()"
+        [disabled]="provisioningEntry.journalEntry"
+        *mifosxHasPermission="'CREATE_JOURNAL_ENTRY'"
+      >
+        <fa-icon icon="plus" class="m-r-10"></fa-icon>
+        {{ 'labels.buttons.Create Journal Entries' | translate }}
+      </button>
+    </div>
+    <mat-card>
+      <mat-card-content>
+        <div class="layout-row-wrap responsive-column content">
+          <div class="flex-16 header">
+            {{ 'labels.inputs.Created By' | translate }}
+          </div>
+          <div class="flex-16">
+            {{ provisioningEntry.createdUser }}
+          </div>
+          <div class="flex-16 header">
+            {{ 'labels.inputs.Created On' | translate }}
+          </div>
+          <div class="flex-16">
+            {{ provisioningEntry.createdDate }}
+          </div>
+          <div class="flex-18 header">
+            {{ 'labels.inputs.Amount to be Reserved' | translate }}
+          </div>
+          <div class="flex-18">
+            {{ provisioningEntry.reservedAmount }}
+          </div>
+        </div>
+      </mat-card-content>
+    </mat-card>
   </div>
-
-  <mat-card>
-    <mat-card-content>
-      <div class="layout-row-wrap responsive-column content">
-        <div class="flex-16 header">
-          {{ 'labels.inputs.Created By' | translate }}
-        </div>
-        <div class="flex-16">
-          {{ provisioningEntry.createdUser }}
-        </div>
-
-        <div class="flex-16 header">
-          {{ 'labels.inputs.Created On' | translate }}
-        </div>
-
-        <div class="flex-16">
-          {{ provisioningEntry.createdDate }}
-        </div>
-
-        <div class="flex-18 header">
-          {{ 'labels.inputs.Amount to be Reserved' | translate }}
-        </div>
-
-        <div class="flex-18">
-          {{ provisioningEntry.reservedAmount }}
-        </div>
-      </div>
-    </mat-card-content>
-  </mat-card>
-</div>
+}
 
 <!-- Search -->
 <div class="container m-t-20 layout-row-wrap responsive-column gap-2percent">
@@ -62,24 +59,27 @@
 
 <!-- Autocomplete data -->
 <mat-autocomplete autoActiveFirstOption #officeNameAutocomplete="matAutocomplete">
-  <mat-option *ngFor="let office of filteredOfficeData | async" [value]="office.name">
-    {{ office.name }}
-  </mat-option>
+  @for (office of filteredOfficeData | async; track office) {
+    <mat-option [value]="office.name">
+      {{ office.name }}
+    </mat-option>
+  }
 </mat-autocomplete>
 
 <mat-autocomplete autoActiveFirstOption #loanProductAutocomplete="matAutocomplete">
-  <mat-option *ngFor="let loanProduct of filteredLoanProductData | async" [value]="loanProduct.name">
-    {{ loanProduct.name }}
-  </mat-option>
+  @for (loanProduct of filteredLoanProductData | async; track loanProduct) {
+    <mat-option [value]="loanProduct.name">
+      {{ loanProduct.name }}
+    </mat-option>
+  }
 </mat-autocomplete>
 
 <mat-autocomplete autoActiveFirstOption #provisioningCategoryAutocomplete="matAutocomplete">
-  <mat-option
-    *ngFor="let provisioningCategory of filteredProvisioningCategoryData | async"
-    [value]="provisioningCategory.categoryName"
-  >
-    {{ provisioningCategory.categoryName }}
-  </mat-option>
+  @for (provisioningCategory of filteredProvisioningCategoryData | async; track provisioningCategory) {
+    <mat-option [value]="provisioningCategory.categoryName">
+      {{ provisioningCategory.categoryName }}
+    </mat-option>
+  }
 </mat-autocomplete>
 
 <!--Table -->

src/app/accounting/provisioning-entries/view-provisioning-entry/view-provisioning-entry.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
+import { Component, OnInit, ViewChild, AfterViewInit, inject } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
 import { MatPaginator } from '@angular/material/paginator';
@@ -23,7 +23,7 @@ import { startWith, map, debounceTime, distinctUntilChanged, tap } from 'rxjs/op
 
 /** Custom Services */
 import { AccountingService } from '../../accounting.service';
-import { NgIf, NgFor, AsyncPipe } from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { MatAutocompleteTrigger, MatAutocomplete, MatOption } from '@angular/material/autocomplete';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
@@ -57,6 +57,10 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ViewProvisioningEntryComponent implements OnInit, AfterViewInit {
+  private accountingService = inject(AccountingService);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+
   /** Provisioning entry id. */
   provisioningEntryId: string;
   /** Provisioning entry. */
@@ -112,11 +116,7 @@ export class ViewProvisioningEntryComponent implements OnInit, AfterViewInit {
    * @param {ActivatedRoute} route Activated Route.
    * @param {Router} router Router for navigation.
    */
-  constructor(
-    private accountingService: AccountingService,
-    private route: ActivatedRoute,
-    private router: Router
-  ) {
+  constructor() {
     this.route.data.subscribe(
       (data: {
         provisioningEntry: any;

src/app/accounting/provisioning-entries/view-provisioning-journal-entries/provisioning-journal-entries.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 { AccountingService } from '../../accounting.service';
  */
 @Injectable()
 export class ProvisioningJournalEntriesResolver {
-  /**
-   * @param {AccountingService} accountingService Accounting service.
-   */
-  constructor(private accountingService: AccountingService) {}
+  private accountingService = inject(AccountingService);
 
   /**
    * Returns the provisioning journal entries data.

src/app/accounting/provisioning-entries/view-provisioning-journal-entries/view-provisioning-journal-entries.component.html

@@ -51,26 +51,30 @@
       <ng-container matColumnDef="debit">
         <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Debit' | translate }}</th>
         <td mat-cell *matCellDef="let provisioningJournalEntry">
-          <span *ngIf="provisioningJournalEntry.entryType.value === 'DEBIT'">
-            {{
-              (provisioningJournalEntry.currency.displaySymbol || provisioningJournalEntry.currency.code) +
-                ' ' +
-                provisioningJournalEntry.amount
-            }}
-          </span>
+          @if (provisioningJournalEntry.entryType.value === 'DEBIT') {
+            <span>
+              {{
+                (provisioningJournalEntry.currency.displaySymbol || provisioningJournalEntry.currency.code) +
+                  ' ' +
+                  provisioningJournalEntry.amount
+              }}
+            </span>
+          }
         </td>
       </ng-container>
 
       <ng-container matColumnDef="credit">
         <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Credit' | translate }}</th>
         <td mat-cell *matCellDef="let provisioningJournalEntry">
-          <span *ngIf="provisioningJournalEntry.entryType.value === 'CREDIT'">
-            {{
-              (provisioningJournalEntry.currency.displaySymbol || provisioningJournalEntry.currency.code) +
-                ' ' +
-                provisioningJournalEntry.amount
-            }}
-          </span>
+          @if (provisioningJournalEntry.entryType.value === 'CREDIT') {
+            <span>
+              {{
+                (provisioningJournalEntry.currency.displaySymbol || provisioningJournalEntry.currency.code) +
+                  ' ' +
+                  provisioningJournalEntry.amount
+              }}
+            </span>
+          }
         </td>
       </ng-container>
 

src/app/accounting/provisioning-entries/view-provisioning-journal-entries/view-provisioning-journal-entries.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild, inject } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort, MatSortHeader } from '@angular/material/sort';
@@ -43,6 +43,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ViewProvisioningJournalEntriesComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+
   /** Provisioning journal entry data. */
   provisioningJournalEntryData: any;
   /** Columns to be displayed in provisioning journal entries table. */
@@ -70,7 +72,7 @@ export class ViewProvisioningJournalEntriesComponent implements OnInit {
    * Retrieves the provisioning journal entries data from `resolve`.
    * @param {ActivatedRoute} route Activated Route.
    */
-  constructor(private route: ActivatedRoute) {
+  constructor() {
     this.route.data.subscribe((data: { provisioningJournalEntry: any }) => {
       this.provisioningJournalEntryData = data.provisioningJournalEntry.pageItems;
     });