ng update @angular/core@20 @angular/cli@20

Ui/angular.json

@@ -21,7 +21,7 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:application",
+          "builder": "@angular/build:application",
           "options": {
             "outputPath": "dist/ui",
             "index": "src/index.html",
@@ -75,7 +75,7 @@
           "defaultConfiguration": "production"
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular/build:dev-server",
           "configurations": {
             "production": {
               "buildTarget": "Ui:build:production"
@@ -87,13 +87,13 @@
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "builder": "@angular/build:extract-i18n",
           "options": {
             "buildTarget": "Ui:build"
           }
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "@angular/build:karma",
           "options": {
             "polyfills": [
               "zone.js",
@@ -114,5 +114,31 @@
         }
       }
     }
+  },
+  "schematics": {
+    "@schematics/angular:component": {
+      "type": "component"
+    },
+    "@schematics/angular:directive": {
+      "type": "directive"
+    },
+    "@schematics/angular:service": {
+      "type": "service"
+    },
+    "@schematics/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:interceptor": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:module": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:resolver": {
+      "typeSeparator": "."
+    }
   }
 }

Ui/karma.conf.js

@@ -1,4 +1,4 @@
-module.exports = function (config) {
+module.exports = function (config) {
   config.set({
     basePath: '',
     frameworks: ['jasmine', '@angular-devkit/build-angular'],
@@ -7,7 +7,7 @@
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
       require('karma-coverage'),
-      require('@angular-devkit/build-angular/plugins/karma')
+      
     ],
     client: {
       jasmine: {

Ui/package.json

@@ -10,14 +10,14 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^19.2.18",
-    "@angular/common": "^19.2.18",
-    "@angular/compiler": "^19.2.18",
-    "@angular/core": "^19.2.18",
-    "@angular/forms": "^19.2.18",
-    "@angular/platform-browser": "^19.2.18",
-    "@angular/platform-browser-dynamic": "^19.2.18",
-    "@angular/router": "^19.2.18",
+    "@angular/animations": "^20.3.16",
+    "@angular/common": "^20.3.16",
+    "@angular/compiler": "^20.3.16",
+    "@angular/core": "^20.3.16",
+    "@angular/forms": "^20.3.16",
+    "@angular/platform-browser": "^20.3.16",
+    "@angular/platform-browser-dynamic": "^20.3.16",
+    "@angular/router": "^20.3.16",
     "@auth0/angular-jwt": "^5.2.0",
     "@ng-bootstrap/ng-bootstrap": "^17.0.1",
     "@popperjs/core": "^2.11.8",
@@ -39,10 +39,10 @@
     "zone.js": "~0.15.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^19.2.20",
-    "@angular/cli": "^19.2.20",
-    "@angular/compiler-cli": "^19.2.18",
-    "@angular/localize": "^19.2.18",
+    "@angular/build": "^20.3.16",
+    "@angular/cli": "^20.3.16",
+    "@angular/compiler-cli": "^20.3.16",
+    "@angular/localize": "^20.3.16",
     "@types/jasmine": "~5.1.0",
     "jasmine-core": "~5.3.0",
     "karma": "~6.4.0",
@@ -50,6 +50,6 @@
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "typescript": "~5.5.4"
+    "typescript": "~5.9.3"
   }
 }

Ui/src/app/Authentication/login/login.component.html

@@ -80,13 +80,15 @@
             </div>
           </form>
         </div>
-    <div class="alliance-counter" *ngIf="allianceCount !== null">
+        @if (allianceCount !== null) {
+          <div class="alliance-counter">
             <span>Currently </span>
             <span class="count">
               <span [countUp]="allianceCount"></span>
             </span>
             <span> alliances use the tool</span>
           </div>
+        }
       </div>
 
       <footer class="footer d-flex flex-wrap justify-content-center justify-content-md-between align-items-center  px-3 py-3 mt-auto shadow-sm gap-2 small text-center">

Ui/src/app/Authentication/register/register.component.html

@@ -91,10 +91,14 @@
                 class="input-group-text eye-icon bi"></i>
               </span>
               <!-- Password Invalid Feedback  -->
-        <div *ngIf="f['password'].invalid && (f['password'].dirty || !f['password'].untouched )"
+              @if (f['password'].invalid && (f['password'].dirty || !f['password'].untouched )) {
+                <div
                   class="invalid-feedback">
-          <p *ngIf="f['password'].hasError('required')">Password is required</p>
-          <div *ngIf="!f['password'].hasError('required')">
+                  @if (f['password'].hasError('required')) {
+                    <p>Password is required</p>
+                  }
+                  @if (!f['password'].hasError('required')) {
+                    <div>
                       <div [ngClass]="f['password'].hasError('hasNumber') ? 'text-danger': 'text-success'">
                         <i
                         [ngClass]="f['password'].hasError('hasNumber') ? 'bi bi-x-square-fill' : 'bi bi-check-square-fill'"></i>
@@ -121,7 +125,9 @@
                         Must contain special characters
                       </div>
                     </div>
+                  }
                 </div>
+              }
             </div>
 
             <div class="form-floating is-invalid mb-3">
@@ -134,12 +140,18 @@
                 <label for="confirmPassword">Confirm Password</label>
               </div>
               <!-- Confirm Password Invalid Feedback  -->
-      <div *ngIf="f['confirmPassword'].invalid && (f['confirmPassword'].dirty || !f['confirmPassword'].untouched )"
+              @if (f['confirmPassword'].invalid && (f['confirmPassword'].dirty || !f['confirmPassword'].untouched )) {
+                <div
                   class="invalid-feedback">
-        <p *ngIf="f['confirmPassword'].hasError('required')">Confirmation is required</p>
+                  @if (f['confirmPassword'].hasError('required')) {
+                    <p>Confirmation is required</p>
+                  }
+                  @if (f['confirmPassword'].hasError('passwordMismatch')) {
                     <p
-          *ngIf="f['confirmPassword'].hasError('passwordMismatch')">Passwords do not match</p>
+                    >Passwords do not match</p>
+                  }
                 </div>
+              }
 
               <div class="d-grid gap-2 col-6 mx-auto">
                 <button [disabled]="registerForm.invalid" type="submit" class="btn btn-success">Register</button>

Ui/src/app/Authentication/reset-password/reset-password.component.html

@@ -51,9 +51,13 @@
               <span (click)="isInputText = !isInputText" class="input-group-text eye-icon">
                 <i [ngClass]="isInputText ? 'bi-eye-slash-fill' : 'bi-eye-fill'" class="bi"></i>
               </span>
-          <div *ngIf="password?.hasError && (password?.dirty || !password?.untouched)" class="invalid-feedback">
-            <p *ngIf="password?.hasError('required')">Password is required</p>
-            <div *ngIf="!password?.hasError('required')">
+              @if (password?.hasError && (password?.dirty || !password?.untouched)) {
+                <div class="invalid-feedback">
+                  @if (password?.hasError('required')) {
+                    <p>Password is required</p>
+                  }
+                  @if (!password?.hasError('required')) {
+                    <div>
                       <div [ngClass]="password?.hasError('hasNumber') ? 'text-danger': 'text-success'">
                         <i [ngClass]="password?.hasError('hasNumber') ? 'bi bi-x-square-fill' : 'bi bi-check-square-fill'"></i>
                         Must have at least 1 number!
@@ -76,7 +80,9 @@
                         Must contain at least 1 special character!
                       </div>
                     </div>
+                  }
                 </div>
+              }
             </div>
           </div>
 
@@ -89,10 +95,16 @@
                 <span (click)="isInputText = !isInputText" class="input-group-text eye-icon">
                   <i [ngClass]="isInputText ? 'bi-eye-slash-fill' : 'bi-eye-fill'" class="bi"></i>
                 </span>
-          <div *ngIf="confirmPassword?.errors && (confirmPassword?.dirty || !confirmPassword?.untouched)" class="invalid-feedback">
-            <p *ngIf="confirmPassword?.hasError('required')">Repeat password is required</p>
-            <p *ngIf="confirmPassword?.hasError('passwordMismatch')">Passwords do not match</p>
+                @if (confirmPassword?.errors && (confirmPassword?.dirty || !confirmPassword?.untouched)) {
+                  <div class="invalid-feedback">
+                    @if (confirmPassword?.hasError('required')) {
+                      <p>Repeat password is required</p>
+                    }
+                    @if (confirmPassword?.hasError('passwordMismatch')) {
+                      <p>Passwords do not match</p>
+                    }
                   </div>
+                }
               </div>
             </div>
 

Ui/src/app/Authentication/sign-up/sign-up.component.html

@@ -98,10 +98,14 @@
                       class="input-group-text eye-icon bi"></i>
                     </span>
                     <!-- Password Invalid Feedback  -->
-        <div *ngIf="f['password'].invalid && (f['password'].dirty || !f['password'].untouched )"
+                    @if (f['password'].invalid && (f['password'].dirty || !f['password'].untouched )) {
+                      <div
                         class="invalid-feedback">
-          <p *ngIf="f['password'].hasError('required')">Required</p>
-          <div *ngIf="!f['password'].hasError('required')">
+                        @if (f['password'].hasError('required')) {
+                          <p>Required</p>
+                        }
+                        @if (!f['password'].hasError('required')) {
+                          <div>
                             <div [ngClass]="f['password'].hasError('hasNumber') ? 'text-danger': 'text-success'">
                               <i
                               [ngClass]="f['password'].hasError('hasNumber') ? 'bi bi-x-square-fill' : 'bi bi-check-square-fill'"></i>
@@ -128,7 +132,9 @@
                               special
                             </div>
                           </div>
+                        }
                       </div>
+                    }
                   </div>
 
                   <div class="form-floating is-invalid mb-3">
@@ -141,12 +147,18 @@
                       <label for="confirmPassword">Confirm Password</label>
                     </div>
                     <!-- Confirm Password Invalid Feedback  -->
-      <div *ngIf="f['confirmPassword'].invalid && (f['confirmPassword'].dirty || !f['confirmPassword'].untouched )"
+                    @if (f['confirmPassword'].invalid && (f['confirmPassword'].dirty || !f['confirmPassword'].untouched )) {
+                      <div
                         class="invalid-feedback">
-        <p *ngIf="f['confirmPassword'].hasError('required')">Confirmation password is required</p>
+                        @if (f['confirmPassword'].hasError('required')) {
+                          <p>Confirmation password is required</p>
+                        }
+                        @if (f['confirmPassword'].hasError('passwordMismatch')) {
                           <p
-          *ngIf="f['confirmPassword'].hasError('passwordMismatch')">Passwords do not match</p>
+                          >Passwords do not match</p>
+                        }
                       </div>
+                    }
 
                     <div class="d-flex justify-content-between">
                       <button type="button" (click)="onCancel()" class="btn btn-warning">Cancel</button>

Ui/src/app/navigation/navigation.component.html

@@ -78,7 +78,8 @@
         </ul>
 
         <!-- User menu (visible only when user is logged in) -->
-        <div *ngIf="loggedInUser" class="login">
+        @if (loggedInUser) {
+          <div class="login">
             <ul class="navbar-nav me-auto">
               <li ngbDropdown display="dynamic" class="nav-item" role="presentation">
                 <button type="button" class="nav-link" ngbDropdownToggle>
@@ -95,13 +96,16 @@
               </li>
             </ul>
           </div>
+        }
 
         <!-- Login button (visible only when user is not logged in) -->
-        <div *ngIf="!loggedInUser" class="d-flex login" routerLink="/login">
+        @if (!loggedInUser) {
+          <div class="d-flex login" routerLink="/login">
             <button (click)="isShown = false" class="btn btn-secondary" routerLink="/login"><i
             class="bi bi-box-arrow-right"></i> Login
           </button>
         </div>
+      }
     </div>
   </div>
 </nav>

Ui/tsconfig.json

@@ -14,7 +14,7 @@
     "sourceMap": true,
     "declaration": false,
     "experimentalDecorators": true,
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "importHelpers": true,
     "target": "ES2022",
     "module": "ES2022",