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/shares/shares-account-view/charges-tab/charges-tab.component.html

@@ -56,50 +56,54 @@
       <ng-container matColumnDef="actions">
         <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
         <td mat-cell *matCellDef="let charge">
-          <span *ngIf="sharesAccountData.status.value === 'Submitted and pending approval'">
-            <button
-              class="account-action-button"
-              mat-raised-button
-              color="primary"
-              matTooltip="{{ 'tooltips.Edit Charge' | translate }}"
-              *mifosxHasPermission="'UPDATE_SHARESACCOUNTCHARGE'"
-              (click)="routeEdit($event); editCharge(charge)"
-            >
-              <i class="fa fa-pencil"></i>
-            </button>
-            <button
-              class="account-action-button"
-              mat-raised-button
-              color="warn"
-              matTooltip="{{ 'tooltips.Delete Charge' | translate }}"
-              *mifosxHasPermission="'DELETE_SHARESACCOUNTCHARGE'"
-              (click)="routeEdit($event); deleteCharge(charge.id)"
-            >
-              <i class="fa fa-trash"></i>
-            </button>
-          </span>
-          <span *ngIf="sharesAccountData.status.value === 'Active'">
-            <button
-              class="account-action-button"
-              mat-raised-button
-              color="primary"
-              matTooltip="{{ 'tooltips.Pay Charge' | translate }}"
-              *mifosxHasPermission="'PAY_SHARESACCOUNTCHARGE'"
-              (click)="routeEdit($event); payCharge(charge.id)"
-            >
-              <i class="fa fa-dollar"></i>
-            </button>
-            <button
-              class="account-action-button"
-              mat-raised-button
-              color="primary"
-              matTooltip="{{ 'tooltips.Waive Charge' | translate }}"
-              *mifosxHasPermission="'WAIVE_SHARESACCOUNTCHARGE'"
-              (click)="routeEdit($event); waiveCharge(charge.id)"
-            >
-              <i class="fa fa-flag"></i>
-            </button>
-          </span>
+          @if (sharesAccountData.status.value === 'Submitted and pending approval') {
+            <span>
+              <button
+                class="account-action-button"
+                mat-raised-button
+                color="primary"
+                matTooltip="{{ 'tooltips.Edit Charge' | translate }}"
+                *mifosxHasPermission="'UPDATE_SHARESACCOUNTCHARGE'"
+                (click)="routeEdit($event); editCharge(charge)"
+              >
+                <i class="fa fa-pencil"></i>
+              </button>
+              <button
+                class="account-action-button"
+                mat-raised-button
+                color="warn"
+                matTooltip="{{ 'tooltips.Delete Charge' | translate }}"
+                *mifosxHasPermission="'DELETE_SHARESACCOUNTCHARGE'"
+                (click)="routeEdit($event); deleteCharge(charge.id)"
+              >
+                <i class="fa fa-trash"></i>
+              </button>
+            </span>
+          }
+          @if (sharesAccountData.status.value === 'Active') {
+            <span>
+              <button
+                class="account-action-button"
+                mat-raised-button
+                color="primary"
+                matTooltip="{{ 'tooltips.Pay Charge' | translate }}"
+                *mifosxHasPermission="'PAY_SHARESACCOUNTCHARGE'"
+                (click)="routeEdit($event); payCharge(charge.id)"
+              >
+                <i class="fa fa-dollar"></i>
+              </button>
+              <button
+                class="account-action-button"
+                mat-raised-button
+                color="primary"
+                matTooltip="{{ 'tooltips.Waive Charge' | translate }}"
+                *mifosxHasPermission="'WAIVE_SHARESACCOUNTCHARGE'"
+                (click)="routeEdit($event); waiveCharge(charge.id)"
+              >
+                <i class="fa fa-flag"></i>
+              </button>
+            </span>
+          }
         </td>
       </ng-container>
 

src/app/shares/shares-account-view/charges-tab/charges-tab.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import {
   MatTableDataSource,
   MatTable,
@@ -14,7 +14,7 @@ import {
   MatRow
 } from '@angular/material/table';
 import { ActivatedRoute } from '@angular/router';
-import { NgIf, CurrencyPipe } from '@angular/common';
+import { CurrencyPipe } from '@angular/common';
 import { MatTooltip } from '@angular/material/tooltip';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
@@ -42,6 +42,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ChargesTabComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+
   /** Shares Account Data */
   sharesAccountData: any;
   /** Charges Data */
@@ -65,7 +67,7 @@ export class ChargesTabComponent implements OnInit {
    * Retrieves shares account aata from `resolve`.
    * @param {ActivatedRoute} route Activated Route.
    */
-  constructor(private route: ActivatedRoute) {
+  constructor() {
     this.route.parent.data.subscribe((data: { sharesAccountData: any }) => {
       this.sharesAccountData = data.sharesAccountData;
       this.chargesData = this.sharesAccountData.charges;

src/app/shares/shares-account-view/dividends-tab/dividends-tab.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import {
   MatTableDataSource,
   MatTable,
@@ -42,6 +42,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class DividendsTabComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+
   /** Shares Account Data */
   shareAccountData: any;
   /** Dividends Data */
@@ -60,7 +62,7 @@ export class DividendsTabComponent implements OnInit {
    * Retrieves shares account data from `resolve`.
    * @param {ActivatedRoute} route Activated Route.
    */
-  constructor(private route: ActivatedRoute) {
+  constructor() {
     this.route.parent.data.subscribe((data: { sharesAccountData: any }) => {
       this.shareAccountData = data.sharesAccountData;
       this.dividendsData = this.shareAccountData.dividends;

src/app/shares/shares-account-view/general-tab/general-tab.component.html

@@ -6,12 +6,16 @@
         <tbody>
           <tr>
             <td>{{ 'labels.inputs.Activated On' | translate }}</td>
-            <td *ngIf="sharesAccountData.timeline.activatedDate">
-              {{ sharesAccountData.timeline.activatedDate | dateFormat }}
-            </td>
-            <td *ngIf="!sharesAccountData.timeline.activatedDate">
-              {{ 'labels.text.Not Activated' | translate }}
-            </td>
+            @if (sharesAccountData.timeline.activatedDate) {
+              <td>
+                {{ sharesAccountData.timeline.activatedDate | dateFormat }}
+              </td>
+            }
+            @if (!sharesAccountData.timeline.activatedDate) {
+              <td>
+                {{ 'labels.text.Not Activated' | translate }}
+              </td>
+            }
           </tr>
           <tr>
             <td>{{ 'labels.inputs.Currency' | translate }}</td>
@@ -19,26 +23,36 @@
           </tr>
           <tr>
             <td>{{ 'labels.inputs.External Id' | translate }}</td>
-            <td *ngIf="sharesAccountData.externalId">
-              <mifosx-external-identifier externalId="{{ sharesAccountData.externalId }}"></mifosx-external-identifier>
-            </td>
-            <td *ngIf="!sharesAccountData.externalId">
-              {{ 'labels.inputs.Unassigned' | translate }}
-            </td>
+            @if (sharesAccountData.externalId) {
+              <td>
+                <mifosx-external-identifier
+                  externalId="{{ sharesAccountData.externalId }}"
+                ></mifosx-external-identifier>
+              </td>
+            }
+            @if (!sharesAccountData.externalId) {
+              <td>
+                {{ 'labels.inputs.Unassigned' | translate }}
+              </td>
+            }
           </tr>
           <tr>
             <td>{{ 'labels.inputs.Linked Savings Account(Dividend Posting)' | translate }}</td>
-            <td *ngIf="sharesAccountData.savingsAccountNumber">
-              <mifosx-account-number
-                accountType="2"
-                clientId="{{ sharesAccountData.clientId }}"
-                accountId="{{ sharesAccountData.savingsAccountId }}"
-                accountNo="{{ sharesAccountData.savingsAccountNumber }}"
-              ></mifosx-account-number>
-            </td>
-            <td *ngIf="!sharesAccountData.savingsAccountNumber">
-              {{ 'labels.inputs.Unassigned' | translate }}
-            </td>
+            @if (sharesAccountData.savingsAccountNumber) {
+              <td>
+                <mifosx-account-number
+                  accountType="2"
+                  clientId="{{ sharesAccountData.clientId }}"
+                  accountId="{{ sharesAccountData.savingsAccountId }}"
+                  accountNo="{{ sharesAccountData.savingsAccountNumber }}"
+                ></mifosx-account-number>
+              </td>
+            }
+            @if (!sharesAccountData.savingsAccountNumber) {
+              <td>
+                {{ 'labels.inputs.Unassigned' | translate }}
+              </td>
+            }
           </tr>
         </tbody>
       </table>

src/app/shares/shares-account-view/general-tab/general-tab.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { ExternalIdentifierComponent } from '../../../shared/external-identifier/external-identifier.component';
 import { AccountNumberComponent } from '../../../shared/account-number/account-number.component';
@@ -19,6 +19,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class GeneralTabComponent {
+  private route = inject(ActivatedRoute);
+
   /** Shares Account Data */
   sharesAccountData: any;
 
@@ -26,7 +28,7 @@ export class GeneralTabComponent {
    * Fetches shares account data from `resolve`
    * @param {ActivatedRoute} route Activated Route
    */
-  constructor(private route: ActivatedRoute) {
+  constructor() {
     this.route.data.subscribe((data: { sharesAccountData: any }) => {
       this.sharesAccountData = data.sharesAccountData;
     });

src/app/shares/shares-account-view/shares-account-view.component.html

@@ -35,9 +35,11 @@
                 <span class="m-r-10"
                   >{{ 'labels.text.' + entityType | translate }} {{ 'labels.inputs.name' | translate }} :</span
                 >{{ sharesAccountData.clientName || sharesAccountData.groupName }}
-                <span class="m-l-10" *ngIf="sharesAccountData.clientAccountNo">
-                  <mifosx-account-number accountNo="{{ sharesAccountData.clientAccountNo }}"></mifosx-account-number>
-                </span>
+                @if (sharesAccountData.clientAccountNo) {
+                  <span class="m-l-10">
+                    <mifosx-account-number accountNo="{{ sharesAccountData.clientAccountNo }}"></mifosx-account-number>
+                  </span>
+                }
               </span>
               <div>
                 <table class="account-overview">
@@ -46,13 +48,15 @@
                       <td>{{ 'labels.inputs.Current Market Price' | translate }} :</td>
                       <td>{{ sharesAccountData.currentMarketPrice | formatNumber }}</td>
                     </tr>
-                    <tr *ngIf="sharesAccountData.lockinPeriod">
-                      <td>{{ 'labels.inputs.Lockin Period' | translate }} :</td>
-                      <td>
-                        {{ sharesAccountData.lockinPeriod }}
-                        {{ sharesAccountData.lockPeriodTypeEnum.value | translateKey: 'catalogs' }}
-                      </td>
-                    </tr>
+                    @if (sharesAccountData.lockinPeriod) {
+                      <tr>
+                        <td>{{ 'labels.inputs.Lockin Period' | translate }} :</td>
+                        <td>
+                          {{ sharesAccountData.lockinPeriod }}
+                          {{ sharesAccountData.lockPeriodTypeEnum.value | translateKey: 'catalogs' }}
+                        </td>
+                      </tr>
+                    }
                   </tbody>
                 </table>
               </div>
@@ -60,17 +64,18 @@
 
             <span class="flex-auto"></span>
             <div class="flex-40">
-              <button
-                mat-icon-button
-                [matMenuTriggerFor]="accountMenu"
-                aria-label="Share account actions"
-                yPosition="below"
-                *ngIf="buttonConfig.singleButtons.length > 0"
-              >
-                <mat-icon matListIcon class="actions-menu">
-                  <fa-icon icon="bars" size="sm"></fa-icon>
-                </mat-icon>
-              </button>
+              @if (buttonConfig.singleButtons.length > 0) {
+                <button
+                  mat-icon-button
+                  [matMenuTriggerFor]="accountMenu"
+                  aria-label="Share account actions"
+                  yPosition="below"
+                >
+                  <mat-icon matListIcon class="actions-menu">
+                    <fa-icon icon="bars" size="sm"></fa-icon>
+                  </mat-icon>
+                </button>
+              }
             </div>
           </div>
         </mat-card-title>
@@ -78,25 +83,27 @@
     </mat-card-title-group>
 
     <mat-menu #accountMenu="matMenu">
-      <ng-container *ngFor="let item of buttonConfig.singleButtons">
+      @for (item of buttonConfig.singleButtons; track item) {
         <button mat-menu-item *mifosxHasPermission="item.taskPermissionName" (click)="doAction(item.name)">
           <mat-icon matListIcon>
             <fa-icon icon="{{ item.icon }}" size="sm"></fa-icon>
           </mat-icon>
           <span>{{ 'labels.menus.' + item.name | translate }}</span>
         </button>
-      </ng-container>
+      }
 
-      <ng-container *ngIf="buttonConfig.options.length">
+      @if (buttonConfig.options.length) {
         <button mat-menu-item [matMenuTriggerFor]="More">{{ 'labels.menus.More' | translate }}</button>
         <mat-menu #More="matMenu">
-          <span *ngFor="let option of buttonConfig.options">
-            <button mat-menu-item *mifosxHasPermission="option.taskPermissionName" (click)="doAction(option.name)">
-              {{ 'labels.menus.' + option.name | translate }}
-            </button>
-          </span>
+          @for (option of buttonConfig.options; track option) {
+            <span>
+              <button mat-menu-item *mifosxHasPermission="option.taskPermissionName" (click)="doAction(option.name)">
+                {{ 'labels.menus.' + option.name | translate }}
+              </button>
+            </span>
+          }
         </mat-menu>
-      </ng-container>
+      }
     </mat-menu>
   </mat-card-header>
 

src/app/shares/shares-account-view/shares-account-view.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { ActivatedRoute, Router, RouterLinkActive, RouterLink, RouterOutlet } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
 
@@ -20,7 +20,7 @@ import {
   MatCardContent
 } from '@angular/material/card';
 import { MatTooltip } from '@angular/material/tooltip';
-import { NgClass, NgIf, NgFor } from '@angular/common';
+import { NgClass } from '@angular/common';
 import { LongTextComponent } from '../../shared/long-text/long-text.component';
 import { AccountNumberComponent } from '../../shared/account-number/account-number.component';
 import { MatIconButton } from '@angular/material/button';
@@ -65,6 +65,11 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class SharesAccountViewComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private sharesService = inject(SharesService);
+  dialog = inject(MatDialog);
+
   /** Shares Account Data */
   sharesAccountData: any;
   /** Button Configurations */
@@ -79,12 +84,7 @@ export class SharesAccountViewComponent implements OnInit {
    * @param {SharesService} sharesService Shares Service
    * @param {MatDialog} dialog Mat Dialog
    */
-  constructor(
-    private route: ActivatedRoute,
-    private router: Router,
-    private sharesService: SharesService,
-    public dialog: MatDialog
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { sharesAccountData: any }) => {
       this.sharesAccountData = data.sharesAccountData;
     });

src/app/shares/shares-account-view/transactions-tab/transactions-tab.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import {
   MatTableDataSource,
   MatTable,
@@ -40,6 +40,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class TransactionsTabComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+
   /** Shares Account Data */
   shareAccountData: any;
   /** Transactions Data */
@@ -60,7 +62,7 @@ export class TransactionsTabComponent implements OnInit {
    * Retrieves shares account data from `resolve`.
    * @param {ActivatedRoute} route Activated Route.
    */
-  constructor(private route: ActivatedRoute) {
+  constructor() {
     this.route.parent.data.subscribe((data: { sharesAccountData: any }) => {
       this.shareAccountData = data.sharesAccountData;
       this.transactionsData = this.shareAccountData.purchasedShares;