Dev

.github/workflows/build_test.yml

@@ -23,7 +23,7 @@ jobs:
       - name: Set Up Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 20.16.0
+          node-version: 22.14.0
 
       - name: Install Dependencies
         run: |
@@ -89,31 +89,62 @@ jobs:
 
       - name: Wait for Quality Gate
         run: |
-          TASK_ID=$(cat .scannerwork/report-task.txt | grep ceTaskId | cut -d= -f2)
-          echo "Fetching task status... for $TASK_ID"
-          curl -s -u "${{ secrets.SONAR_TOKEN }}:" "https://sonarcloud.io/api/ce/task?id=$TASK_ID" -o task.json
+          #!/bin/bash
+          TASK_FILE=.scannerwork/report-task.txt
+          echo "Fetching task status... for TASK_ID=$(cat $TASK_FILE)"
+          TASK_ID=$(grep "ceTaskId" "$TASK_FILE" | cut -d= -f2 | tr -d '[:space:]')
 
-          echo "Task API Response:"
-          cat task.json
-
-          STATUS=$(grep -o '"status":"[^"]*"' task.json | cut -d: -f2 | tr -d '"')
-          if [[ "$STATUS" != "SUCCESS" ]]; then
-            echo "Analysis did not complete successfully!"
+          if [[ -z "$TASK_ID" ]]; then
+            echo "Error: TASK_ID is empty. Check Sonar task file."
             exit 1
           fi
 
-          echo "Fetching Quality Gate status..."
-          ANALYSIS_ID=$(grep -o '"analysisId":"[^"]*"' task.json | cut -d: -f2 | tr -d '"')
-          curl -s -u "${{ secrets.SONAR_TOKEN }}:" "https://sonarcloud.io/api/qualitygates/project_status?analysisId=$ANALYSIS_ID" -o gate.json
-
-          echo "Quality Gate API Response:"
-          cat gate.json
-
-          GATE_STATUS=$(jq -r '.projectStatus.status' gate.json)
-          if [[ "$GATE_STATUS" != "OK" ]]; then
-            echo "Quality Gate failed!"
-            exit 1
-          fi
+          # Wait for SonarCloud to complete the analysis
+          MAX_RETRIES=15
+          RETRY_DELAY=10
+          TRIES=0
+
+          while ((TRIES < MAX_RETRIES)); do
+            # Fetch task status from SonarCloud
+            RESPONSE=$(curl -s -u "***:" "https://sonarcloud.io/api/ce/task?id=$TASK_ID")
+            echo "Response: $RESPONSE"  # This logs the response from SonarCloud
+
+            # Check if the response contains data
+            if [[ -z "$RESPONSE" ]]; then
+              echo "Warning: Empty response from SonarCloud. Retrying..."
+              sleep $RETRY_DELAY
+              ((TRIES++))
+              continue
+            fi
+
+            # Attempt to extract the status from the response
+            STATUS=$(echo "$RESPONSE" | grep -o '"status":"[^"]*"' | cut -d: -f2 | tr -d '"')
+
+            if [[ -z "$STATUS" ]]; then
+              echo "Warning: STATUS is empty. Retrying..."
+              sleep $RETRY_DELAY
+              ((TRIES++))
+              continue
+            fi
+
+            echo "Current Task Status: $STATUS"
+
+            if [[ "$STATUS" == "SUCCESS" ]]; then
+              break
+            elif [[ "$STATUS" == "FAILED" ]]; then
+              echo "SonarCloud analysis failed!"
+              echo "$RESPONSE"  # Show full response on failure
+              exit 1
+            fi
+
+            ((TRIES++))
+            if [[ "$TRIES" -ge "$MAX_RETRIES" ]]; then
+              echo "SonarCloud analysis taking too long. Exiting."
+              exit 1
+            fi
+
+            echo "Waiting for SonarCloud to complete analysis... (Attempt $TRIES/$MAX_RETRIES)"
+            sleep $RETRY_DELAY
+          done
 
-          echo "Quality Gate passed successfully!"
         shell: bash

README.md

@@ -47,7 +47,7 @@ This project is licensed under the MIT License (see [LICENSE](https://github.com
 
 ### Node
 
-Install node `20.16.0` Recommended to install NVM to manage node versions.
+Install node `22.14.0` Recommended to install NVM to manage node versions.
 
 Install NPM 10.8.1 (should be bundled with node).
 

client/package.json

@@ -9,31 +9,31 @@
   },
   "private": true,
   "dependencies": {
-    "@angular-devkit/build-angular": "^18.1.3",
-    "@angular/animations": "^18.1.3",
-    "@angular/cli": "~18.1.3",
-    "@angular/common": "^18.1.3",
-    "@angular/compiler": "^18.1.3",
-    "@angular/compiler-cli": "^18.1.3",
-    "@angular/core": "^18.1.3",
-    "@angular/forms": "^18.1.3",
-    "@angular/platform-browser": "^18.1.3",
-    "@angular/platform-browser-dynamic": "^18.1.3",
-    "@angular/router": "^18.1.3",
-    "@angular/service-worker": "^18.1.3",
+    "@angular-devkit/build-angular": "^19.1.7",
+    "@angular/animations": "^19.1.6",
+    "@angular/cli": "~19.1.7",
+    "@angular/common": "^19.1.6",
+    "@angular/compiler": "^19.1.6",
+    "@angular/compiler-cli": "^19.1.6",
+    "@angular/core": "^19.1.6",
+    "@angular/forms": "^19.1.6",
+    "@angular/platform-browser": "^19.1.6",
+    "@angular/platform-browser-dynamic": "^19.1.6",
+    "@angular/router": "^19.1.6",
+    "@angular/service-worker": "^19.1.6",
     "@jsverse/transloco": "^7.4.3",
     "@jsverse/transloco-locale": "^7.0.1",
     "@jsverse/transloco-messageformat": "^7.0.1",
     "@jsverse/transloco-persist-lang": "^7.0.1",
     "fast-deep-equal": "^3.1.3",
     "i18n-l10n-flags": "^2.0.0",
     "idb": "^8.0.0",
-    "ngx-cookie-service": "^18.0.0",
-    "ngx-markdown": "^18.1.0",
-    "ngx-socket-io": "^4.7.0",
+    "ngx-cookie-service": "^19.1.0",
+    "ngx-markdown": "^19.1.0",
+    "ngx-socket-io": "^4.8.4",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
-    "zone.js": "~0.14.8"
+    "zone.js": "~0.15.0"
   },
   "devDependencies": {
     "@types/jasmine": "~4.3.0",
@@ -46,6 +46,6 @@
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
     "karma-sabarivka-reporter": "^3.3.1",
-    "typescript": "~5.4.5"
+    "typescript": "~5.7.3"
   }
 }

client/src/app/app.component.ts

@@ -29,16 +29,15 @@ export const componentList: ComponentList = {
 
 @AutoUnsubscribe()
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-  imports: [
-    NgComponentOutlet,
-    TranslocoDirective,
-    FooterComponent,
-  ],
-  styles: ``
+    selector: 'app-root',
+    templateUrl: './app.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [
+        NgComponentOutlet,
+        TranslocoDirective,
+        FooterComponent,
+    ],
+    styles: ``
 })
 export class AppComponent implements OnDestroy {
   componentList = componentList;

client/src/app/components/api/api.component.ts

@@ -4,13 +4,12 @@ import { MarkdownComponent } from 'ngx-markdown';
 import { catchError, of } from 'rxjs';
 
 @Component({
-  selector: 'app-api',
-  standalone: true,
-  imports: [
-    MarkdownComponent,
-  ],
-  templateUrl: './api.component.html',
-  styles: ``
+    selector: 'app-api',
+    imports: [
+        MarkdownComponent,
+    ],
+    templateUrl: './api.component.html',
+    styles: ``
 })
 export class ApiComponent {
   results: any = null;

client/src/app/components/app-version/app-version.component.ts

@@ -4,13 +4,12 @@ import { TranslocoDirective } from '@jsverse/transloco';
 import packageJson from '../../../../../package.json';
 
 @Component({
-  selector: 'app-app-version',
-  standalone: true,
-  imports: [
-    TranslocoDirective,
-  ],
-  templateUrl: './app-version.component.html',
-  styles: ``
+    selector: 'app-app-version',
+    imports: [
+        TranslocoDirective,
+    ],
+    templateUrl: './app-version.component.html',
+    styles: ``
 })
 export class AppVersionComponent {
   public version: string = packageJson.version;

client/src/app/components/environment/environment.component.ts

@@ -2,11 +2,10 @@ import { Component, isDevMode } from '@angular/core';
 import { TranslocoDirective } from '@jsverse/transloco';
 
 @Component({
-  selector: 'app-environment',
-  standalone: true,
-  imports: [TranslocoDirective],
-  templateUrl: './environment.component.html',
-  styles: ``
+    selector: 'app-environment',
+    imports: [TranslocoDirective],
+    templateUrl: './environment.component.html',
+    styles: ``
 })
 export class EnvironmentComponent {
   isDevMode = isDevMode();

client/src/app/components/features/features.component.ts

@@ -8,14 +8,13 @@ import { Subscription } from 'rxjs';
 
 @AutoUnsubscribe()
 @Component({
-  selector: 'app-features',
-  standalone: true,
-  imports: [
-    TranslocoDirective,
-    ReactiveFormsModule,
-  ],
-  templateUrl: './features.component.html',
-  styles: ``,
+    selector: 'app-features',
+    imports: [
+        TranslocoDirective,
+        ReactiveFormsModule,
+    ],
+    templateUrl: './features.component.html',
+    styles: ``
 })
 export class FeaturesComponent implements OnInit, OnDestroy {
   featureControls: { [key: string]: FormControl } = {};

client/src/app/components/indexed-db/indexed-db.component.ts

@@ -8,14 +8,13 @@ import { AutoUnsubscribe } from 'src/app/helpers/unsub';
 
 @AutoUnsubscribe()
 @Component({
-  selector: 'app-indexed-db',
-  standalone: true,
-  imports: [
-    ReactiveFormsModule,
-    TranslocoDirective,
-  ],
-  templateUrl: './indexed-db.component.html',
-  styles: ``
+    selector: 'app-indexed-db',
+    imports: [
+        ReactiveFormsModule,
+        TranslocoDirective,
+    ],
+    templateUrl: './indexed-db.component.html',
+    styles: ``
 })
 export class IndexedDBComponent implements OnInit, OnDestroy {
   textAreaData = new FormControl('');

client/src/app/components/layout/footer/footer.component.ts

@@ -7,7 +7,6 @@ import { TranslocoService } from '@jsverse/transloco';
 @Component({
     selector: 'app-footer',
     templateUrl: './footer.component.html',
-    standalone: true,
     imports: [NgClass],
     styles: ``
 })

client/src/app/providers/feature-flag.provider.ts

@@ -1,4 +1,4 @@
-import { APP_INITIALIZER, inject } from "@angular/core";
+import { inject, provideAppInitializer } from "@angular/core";
 import { Observable } from "rxjs";
 import { FeatureFlagService } from "../services/feature-flag.service";
 
@@ -7,9 +7,7 @@ function initializeFeatureFlag(): () => Observable<any> {
   return () => featureFlagService.getFeatureFlags();
 }
 
-export const provideFeatureFlag = () => ({
-  provide: APP_INITIALIZER,
-  useFactory: initializeFeatureFlag,
-  deps: [],
-  multi: true,
-})
+export const provideFeatureFlag = () => (provideAppInitializer(() => {
+        const initializerFn = (initializeFeatureFlag)();
+        return initializerFn();
+      }))

client/src/app/services/feature-flag.service.spec.ts

@@ -11,8 +11,9 @@ describe('FeatureFlagService', () => {
   let socketSpy: jasmine.SpyObj<Socket>;
 
   beforeEach(() => {
-    socketSpy = jasmine.createSpyObj('Socket', ['on']);
-    socketSpy.ioSocket = { connected: true };
+    socketSpy = jasmine.createSpyObj('Socket', ['on'], {
+      ioSocket: { connected: true }
+    });
 
     TestBed.configureTestingModule({
       providers: [

client/src/app/services/socket.io.service.ts

@@ -10,7 +10,7 @@ export class SocketIoService {
 
   // Listen to an event
   listen<T>(event: string): Observable<T> {
-    return this.socket.fromEvent<T>(event);
+    return this.socket.fromEvent(event);
   }
 
   // Emit an event