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/system/manage-jobs/workflow-jobs/workflow-diagram/workflow-diagram.component.html

@@ -40,13 +40,11 @@
         </textPath>
       </svg:text>
     </svg:g>
-    <svg:g
-      class="link-midpoint"
-      *ngIf="link.midPoint"
-      [attr.transform]="'translate(' + link.midPoint.x + ',' + link.midPoint.y + ')'"
-    >
-      <ellipse rx="30" ry="10" />
-      <svg:text alignment-baseline="central">{{ link.data.linkText | translateKey: 'text' }}</svg:text>
-    </svg:g>
+    @if (link.midPoint) {
+      <svg:g class="link-midpoint" [attr.transform]="'translate(' + link.midPoint.x + ',' + link.midPoint.y + ')'">
+        <ellipse rx="30" ry="10" />
+        <svg:text alignment-baseline="central">{{ link.data.linkText | translateKey: 'text' }}</svg:text>
+      </svg:g>
+    }
   </ng-template>
 </ngx-graph>

src/app/system/manage-jobs/workflow-jobs/workflow-jobs.component.html

@@ -2,71 +2,75 @@
   <mat-form-field class="flex-31">
     <mat-label>{{ 'labels.inputs.Job Name' | translate }}</mat-label>
     <mat-select [formControl]="jobName" (selectionChange)="getWorkflowJobSteps($event.value)">
-      <mat-option *ngFor="let job of jobNameOptions" [value]="job">
-        {{ job | translateKey: 'catalogs' }}
-      </mat-option>
+      @for (job of jobNameOptions; track job) {
+        <mat-option [value]="job">
+          {{ job | translateKey: 'catalogs' }}
+        </mat-option>
+      }
     </mat-select>
   </mat-form-field>
 
-  <div class="action-button gap-25percent" *ngIf="jobStepName">
-    <button mat-raised-button color="primary" (click)="addJobStep()">
-      <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Link Job Step' | translate }}
-    </button>
-  </div>
+  @if (jobStepName) {
+    <div class="action-button gap-25percent">
+      <button mat-raised-button color="primary" (click)="addJobStep()">
+        <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Link Job Step' | translate }}
+      </button>
+    </div>
+  }
 
-  <div class="mat-elevation-z8 container" *ngIf="jobStepsData.length > 0">
-    <table
-      mat-table
-      [dataSource]="jobStepsData"
-      #table
-      cdkDropList
-      [cdkDropListData]="jobStepsData"
-      (cdkDropListDropped)="dropTable($event)"
-    >
-      <ng-container matColumnDef="stepName">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Step Name' | translate }}</th>
-        <td mat-cell *matCellDef="let jobStep">{{ jobStep.stepName }}</td>
-      </ng-container>
+  @if (jobStepsData.length > 0) {
+    <div class="mat-elevation-z8 container">
+      <table
+        mat-table
+        [dataSource]="jobStepsData"
+        #table
+        cdkDropList
+        [cdkDropListData]="jobStepsData"
+        (cdkDropListDropped)="dropTable($event)"
+      >
+        <ng-container matColumnDef="stepName">
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Step Name' | translate }}</th>
+          <td mat-cell *matCellDef="let jobStep">{{ jobStep.stepName }}</td>
+        </ng-container>
+        <ng-container matColumnDef="stepOrder">
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Order' | translate }}</th>
+          <td mat-cell *matCellDef="let jobStep">{{ jobStep.order }}</td>
+        </ng-container>
+        <ng-container matColumnDef="actions">
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
+          <td mat-cell *matCellDef="let row; let rowIndex = index">
+            <button
+              type="button"
+              mat-icon-button
+              color="warn"
+              (click)="removeJobStep(rowIndex)"
+              matTooltip="{{ 'tooltips.Delete' | translate }}"
+              matTooltipPosition="left"
+            >
+              <fa-icon icon="trash"></fa-icon>
+            </button>
+          </td>
+        </ng-container>
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row cdkDrag [cdkDragData]="row" *matRowDef="let row; columns: displayedColumns"></tr>
+      </table>
+    </div>
+  }
 
-      <ng-container matColumnDef="stepOrder">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Order' | translate }}</th>
-        <td mat-cell *matCellDef="let jobStep">{{ jobStep.order }}</td>
-      </ng-container>
+  @if (stepOrderHasChanged) {
+    <div class="container margin-t space-top layout-row gap-2percent layout-align-center layout-column-xs">
+      <button mat-raised-button [routerLink]="['../']">
+        {{ 'labels.buttons.Cancel' | translate }}
+      </button>
+      <button mat-raised-button color="primary" (click)="saveChanges()">
+        {{ 'labels.buttons.Apply Changes' | translate }}
+      </button>
+    </div>
+  }
 
-      <ng-container matColumnDef="actions">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
-        <td mat-cell *matCellDef="let row; let rowIndex = index">
-          <button
-            type="button"
-            mat-icon-button
-            color="warn"
-            (click)="removeJobStep(rowIndex)"
-            matTooltip="{{ 'tooltips.Delete' | translate }}"
-            matTooltipPosition="left"
-          >
-            <fa-icon icon="trash"></fa-icon>
-          </button>
-        </td>
-      </ng-container>
-
-      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row cdkDrag [cdkDragData]="row" *matRowDef="let row; columns: displayedColumns"></tr>
-    </table>
-  </div>
-
-  <div
-    *ngIf="stepOrderHasChanged"
-    class="container margin-t space-top layout-row gap-2percent layout-align-center layout-column-xs"
-  >
-    <button mat-raised-button [routerLink]="['../']">
-      {{ 'labels.buttons.Cancel' | translate }}
-    </button>
-    <button mat-raised-button color="primary" (click)="saveChanges()">
-      {{ 'labels.buttons.Apply Changes' | translate }}
-    </button>
-  </div>
-
-  <div class="container space-top" *ngIf="jobStepsData.length > 0 && !stepOrderHasChanged">
-    <mifosx-workflow-diagram [jobStepsData]="jobStepsData"></mifosx-workflow-diagram>
-  </div>
+  @if (jobStepsData.length > 0 && !stepOrderHasChanged) {
+    <div class="container space-top">
+      <mifosx-workflow-diagram [jobStepsData]="jobStepsData"></mifosx-workflow-diagram>
+    </div>
+  }
 </div>

src/app/system/manage-jobs/workflow-jobs/workflow-jobs.component.ts

@@ -1,5 +1,5 @@
 import { CdkDragDrop, moveItemInArray, CdkDropList, CdkDrag } from '@angular/cdk/drag-drop';
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild, inject } from '@angular/core';
 import { UntypedFormControl, Validators, ReactiveFormsModule } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import {
@@ -57,6 +57,10 @@ export interface JobStep {
   ]
 })
 export class WorkflowJobsComponent implements OnInit {
+  private systemService = inject(SystemService);
+  dialog = inject(MatDialog);
+  private translateService = inject(TranslateService);
+
   stepOrderHasChanged = false;
 
   jobNameOptions: any = [];
@@ -76,12 +80,6 @@ export class WorkflowJobsComponent implements OnInit {
     'actions'
   ];
 
-  constructor(
-    private systemService: SystemService,
-    public dialog: MatDialog,
-    private translateService: TranslateService
-  ) {}
-
   ngOnInit(): void {
     this.systemService
       .getWorkflowJobNames()
@@ -171,7 +169,6 @@ export class WorkflowJobsComponent implements OnInit {
                 options: { label: 'stepDescription', value: 'stepName', data: this.jobAvailableStepsData },
                 order: 1
               })
-
             ];
             const data = {
               title: this.translateService.instant('labels.text.Add Job Step to Workflow'),

src/app/system/manage-jobs/workflow-jobs/workflow-jobs.resolver.ts

@@ -10,6 +10,7 @@ export class WorkflowJobResolver {
   /**
    * @param {SystemService} systemService System service.
    */
+  // eslint-disable-next-line @angular-eslint/prefer-inject
   constructor(private systemService: SystemService) {}
 
   /**