Wip/angular 22 update

package.json

@@ -6,11 +6,6 @@
   "workspaces": [
     "packages/*"
   ],
-  "overrides": {
-    "upgrade-frontend": {
-      "typescript": "~5.5.4"
-    }
-  },
   "private": true,
   "devDependencies": {
     "@angular-eslint/eslint-plugin": "^14.1.2",

packages/frontend/angular.json

@@ -1,7 +1,8 @@
 {
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "cli": {
-    "analytics": false
+    "analytics": false,
+    "packageManager": "yarn"
   },
   "version": 1,
   "newProjectRoot": "projects",

packages/frontend/jest.config.js

@@ -6,10 +6,8 @@ module.exports = {
   coverageReporters: ['json-summary', 'text', 'lcov'],
   setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
 
-  // Fix for zone.js/testing module resolution
   moduleNameMapper: {
-    '^zone.js/testing$': '<rootDir>/../../node_modules/zone.js/bundles/zone-testing.umd.js',
-    // Keep other path mappings from tsconfig
+    // Keep path mappings from tsconfig
     '^upgrade_types(.*)$': '<rootDir>/../../../types$1',
     '^@shared-component-lib$': '<rootDir>/src/app/shared-standalone-component-lib/components',
     '^@shared-component-lib/(.*)$': '<rootDir>/src/app/shared-standalone-component-lib/components/$1',

packages/frontend/package.json

@@ -39,25 +39,25 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^20.3.16",
-    "@angular/cdk": "^20.2.14",
-    "@angular/common": "^20.3.28",
-    "@angular/compiler": "^20.3.28",
-    "@angular/core": "^20.3.28",
-    "@angular/forms": "^20.3.16",
-    "@angular/material": "^20.2.14",
-    "@angular/platform-browser": "^20.3.16",
-    "@angular/platform-browser-dynamic": "^20.3.16",
-    "@angular/router": "^20.3.32",
-    "@danielmoncada/angular-datetime-picker": "^20.0.1",
-    "@ngrx/effects": "^20.1.0",
-    "@ngrx/entity": "^20.1.0",
-    "@ngrx/router-store": "^20.1.0",
-    "@ngrx/store": "^20.1.0",
-    "@ngrx/store-devtools": "^20.1.0",
+    "@angular/animations": "^22.2.3",
+    "@angular/cdk": "^22.2.3",
+    "@angular/common": "^22.2.3",
+    "@angular/compiler": "^22.2.3",
+    "@angular/core": "^22.2.3",
+    "@angular/forms": "^22.2.3",
+    "@angular/material": "^22.2.3",
+    "@angular/platform-browser": "^22.2.3",
+    "@angular/platform-browser-dynamic": "^22.2.3",
+    "@angular/router": "^22.2.3",
+    "@danielmoncada/angular-datetime-picker": "^22.0.0",
+    "@ngrx/effects": "^22.0.1",
+    "@ngrx/entity": "^22.0.1",
+    "@ngrx/router-store": "^22.0.1",
+    "@ngrx/store": "^22.0.1",
+    "@ngrx/store-devtools": "^22.0.1",
     "@ngx-translate/core": "^15.0.0",
     "@ngx-translate/http-loader": "^8.0.0",
-    "@swimlane/ngx-charts": "^23.1.0",
+    "@swimlane/ngx-charts": "^25.0.3",
     "ang-jsoneditor": "^3.1.1",
     "angular2-notifications": "^16.0.1",
     "ansi-to-html": "^0.7.2",
@@ -88,28 +88,27 @@
     }
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^20.3.13",
-    "@angular/cli": "^20.3.13",
-    "@angular/compiler-cli": "^20.3.15",
-    "@angular/language-service": "^20.3.15",
+    "@angular-devkit/build-angular": "^22.2.3",
+    "@angular/cli": "^22.2.3",
+    "@angular/compiler-cli": "^22.2.3",
+    "@angular/language-service": "^22.2.3",
     "@types/google.accounts": "^0.0.6",
-    "@types/jest": "^29.5.14",
+    "@types/jest": "^30.0.0",
     "@types/jwt-decode": "^3.1.0",
     "@types/lodash.find": "^4.6.7",
     "@types/lodash.isequal": "^4.5.6",
     "@types/node": "^26.6.3",
-    "codelyzer": "^6.0.2",
     "coverage-badge-creator": "^1.0.11",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.5.0",
-    "jest-preset-angular": "^14.5.0",
+    "jest": "^30.5.2",
+    "jest-environment-jsdom": "^30.5.2",
+    "jest-preset-angular": "^16.2.0",
     "npm-run-all": "^4.1.5",
     "replace-in-file": "^6.1.0",
     "rimraf": "^3.0.2",
     "standard-version": "^9.5.0",
-    "ts-jest": "^29.0.8",
+    "ts-jest": "^29.4.15",
     "ts-node": "~10.8.0",
-    "typescript": "^5.5.4",
+    "typescript": "~6.0.3",
     "webpack-bundle-analyzer": "^4.6.1"
   }
 }

packages/frontend/projects/upgrade/src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 import { AuthService } from './core/auth/auth.service';
 import { HashRoutingNavigationService } from './core/hash-routing-navigation/hash-routing-navigation.service';
 import { TranslateService } from '@ngx-translate/core';
@@ -8,6 +8,7 @@ import { OverlayContainer } from '@angular/cdk/overlay';
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
   standalone: false,
 })
 export class AppComponent implements OnInit {

packages/frontend/projects/upgrade/src/app/app.module.ts

@@ -8,7 +8,7 @@ import { CoreModule } from './core/core.module';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { FormsModule } from '@angular/forms';
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi, withXhr } from '@angular/common/http';
 import { SimpleNotificationsModule } from 'angular2-notifications';
 import { environment } from '../environments/environment';
 import { ENV } from '../environments/environment-types';
@@ -40,7 +40,7 @@ import { provideImportServiceTypeAdapters } from '@shared-component-lib/common-i
   ],
   providers: [
     { provide: ENV, useValue: environment },
-    provideHttpClient(withInterceptorsFromDi()),
+    provideHttpClient(withXhr(), withInterceptorsFromDi()),
     ...provideImportServiceTypeAdapters(),
   ],
 })

packages/frontend/projects/upgrade/src/app/core/core.module.ts

@@ -1,6 +1,12 @@
 import { CommonModule } from '@angular/common';
 import { NgModule, Optional, SkipSelf, ErrorHandler } from '@angular/core';
-import { HttpClient, HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import {
+  HttpClient,
+  HTTP_INTERCEPTORS,
+  provideHttpClient,
+  withInterceptorsFromDi,
+  withXhr,
+} from '@angular/common/http';
 import { StoreRouterConnectingModule, RouterStateSerializer } from '@ngrx/router-store';
 import { StoreModule } from '@ngrx/store';
 import { EffectsModule } from '@ngrx/effects';
@@ -78,7 +84,7 @@ export function HttpLoaderFactory(http: HttpClient, environment: Environment) {
     { provide: HTTP_INTERCEPTORS, useClass: HttpCancelInterceptor, multi: true },
     { provide: ErrorHandler, useClass: AppErrorHandler },
     { provide: RouterStateSerializer, useClass: CustomSerializer },
-    provideHttpClient(withInterceptorsFromDi()),
+    provideHttpClient(withXhr(), withInterceptorsFromDi()),
   ],
 })
 export class CoreModule {

packages/frontend/projects/upgrade/src/app/features/dashboard/dashboard-root/dashboard-root.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject, OnInit } from '@angular/core';
+import { Component, Inject, OnInit, ChangeDetectionStrategy } from '@angular/core';
 import { AuthService } from '../../../core/auth/auth.service';
 import { VersionService } from '../../../core/version/version.service';
 import { ENV, Environment } from '../../../../environments/environment-types';
@@ -7,6 +7,7 @@ import { ENV, Environment } from '../../../../environments/environment-types';
   selector: 'app-dashboard-root',
   templateUrl: './dashboard-root.component.html',
   styleUrls: ['./dashboard-root.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
   standalone: false,
 })
 export class DashboardRootComponent implements OnInit {

packages/frontend/projects/upgrade/src/app/features/dashboard/experiment-users/components/experiment-users/experiment-users.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild, OnDestroy } from '@angular/core';
+import { Component, OnInit, ViewChild, OnDestroy, ChangeDetectionStrategy } from '@angular/core';
 import { ExcludeEntity, EntityTypes } from '../../../../../core/experiment-users/store/experiment-users.model';
 import { Subscription, Observable } from 'rxjs';
 import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
@@ -16,6 +16,7 @@ import { MatTableDataSource } from '@angular/material/table';
   selector: 'users-experiment-users',
   templateUrl: './experiment-users.component.html',
   styleUrls: ['./experiment-users.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
   standalone: false,
 })
 export class ExperimentUsersComponent implements OnInit, OnDestroy {

packages/frontend/projects/upgrade/src/app/features/dashboard/experiment-users/components/preview-user/preview-user.component.html

@@ -77,8 +77,8 @@ <h3 class="ft-22-700">{{ 'users.create-preview-users-title.text' | translate }}<
                       [placeholder]="'home.new-experiment.design.condition.placeholder.text' | translate"
                     >
                       @for (condition of experimentConditions[formIndex]; track condition) {
-                      <mat-option class="ft-14-400" [value]="condition?.id">
-                        {{ condition?.conditionCode | titlecase }}
+                      <mat-option class="ft-14-400" [value]="$safeNavigationMigration(condition?.id)">
+                        {{ $safeNavigationMigration(condition?.conditionCode) | titlecase }}
                       </mat-option>
                       }
                     </mat-select>
@@ -128,7 +128,7 @@ <h3 class="ft-22-700">{{ 'users.create-preview-users-title.text' | translate }}<
                 class="save-btn default-button"
                 [ngClass]="{ 'default-button--disabled': !this.previewUserAssignConditionForm.valid }"
                 [disabled]="!this.previewUserAssignConditionForm.valid"
-                (click)="saveAssignedConditions(element?.id)"
+                (click)="saveAssignedConditions($safeNavigationMigration(element?.id))"
               >
                 {{ 'users.preview-users.save.text' | translate }}
               </button>

packages/frontend/projects/upgrade/src/app/features/dashboard/experiment-users/components/preview-user/preview-user.component.ts

@@ -1,4 +1,12 @@
-import { Component, OnInit, OnDestroy, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  OnDestroy,
+  ViewChild,
+  ElementRef,
+  AfterViewInit,
+  ChangeDetectionStrategy,
+} from '@angular/core';
 import { MatTableDataSource } from '@angular/material/table';
 import { UntypedFormGroup, UntypedFormBuilder, Validators, UntypedFormArray } from '@angular/forms';
 import { PreviewUsersService } from '../../../../../core/preview-users/preview-users.service';
@@ -12,6 +20,7 @@ import { UserRole } from 'upgrade_types';
   selector: 'users-preview-user',
   templateUrl: './preview-user.component.html',
   styleUrls: ['./preview-user.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
   standalone: false,
 })
 export class PreviewUserComponent implements OnInit, OnDestroy, AfterViewInit {

packages/frontend/projects/upgrade/src/app/features/dashboard/experiment-users/experiment-users-root/experiment-users-root.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { ExperimentService } from '../../../../core/experiments/experiments.service';
 import { PreviewUsersService } from '../../../../core/preview-users/preview-users.service';
 import { StratificationFactorsService } from '../../../../core/stratification-factors/stratification-factors.service';
@@ -8,6 +8,7 @@ import { filter, take } from 'rxjs/operators';
   selector: 'app-user-root',
   templateUrl: './experiment-users-root.component.html',
   styleUrls: ['./experiment-users-root.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
   standalone: false,
 })
 export class ExperimentUsersRootComponent {

packages/frontend/projects/upgrade/src/app/features/dashboard/experiments/modals/edit-condition-prior-modal/edit-condition-prior-modal.component.html

@@ -43,9 +43,11 @@
                 (keydown)="blockNonInteger($event)"
                 (input)="enforceMinOne(getSuccessesControl(i))"
               />
-              <mat-error *ngIf="getSuccessesControl(i).hasError('required')">
+              @if (getSuccessesControl(i).hasError('required')) {
+              <mat-error>
                 {{ 'experiments.edit-condition-prior-modal.required-error.text' | translate }}
               </mat-error>
+              }
             </mat-form-field>
           </td>
         </ng-container>
@@ -67,9 +69,11 @@
                 (keydown)="blockNonInteger($event)"
                 (input)="enforceMinOne(getFailuresControl(i))"
               />
-              <mat-error *ngIf="getFailuresControl(i).hasError('required')">
+              @if (getFailuresControl(i).hasError('required')) {
+              <mat-error>
                 {{ 'experiments.edit-condition-prior-modal.required-error.text' | translate }}
               </mat-error>
+              }
             </mat-form-field>
           </td>
         </ng-container>

packages/frontend/projects/upgrade/src/app/features/dashboard/experiments/modals/pause-experiment-modal/pause-experiment-modal.component.html

@@ -12,7 +12,8 @@
     <!-- Confirmation message -->
     <div class="pause-confirm ft-16-400">
       <span>{{
-        'experiments.pause-experiment-modal.message.text' | translate : { experimentName: data.params?.experimentName }
+        'experiments.pause-experiment-modal.message.text'
+          | translate : { experimentName: $safeNavigationMigration(data.params?.experimentName) }
       }}</span>
     </div>
     <!-- Info text -->

packages/frontend/projects/upgrade/src/app/features/dashboard/experiments/modals/upsert-experiment-modal/ts-configurable-policy-parameters-form/ts-configurable-policy-parameters-form.component.ts

@@ -1,4 +1,13 @@
-import { Component, EventEmitter, inject, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import {
+  Component,
+  EventEmitter,
+  inject,
+  Input,
+  OnDestroy,
+  OnInit,
+  Output,
+  ChangeDetectionStrategy,
+} from '@angular/core';
 import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
@@ -16,6 +25,7 @@ import isEqual from 'lodash.isequal';
   standalone: true,
   imports: [ReactiveFormsModule, MatFormFieldModule, MatInputModule, TranslateModule],
   templateUrl: './ts-configurable-policy-parameters-form.component.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
   styleUrl: './ts-configurable-policy-parameters-form.component.scss',
 })
 export class TsConfigurablePolicyParametersFormComponent implements OnInit, OnDestroy {

packages/frontend/projects/upgrade/src/app/features/dashboard/experiments/modals/upsert-experiment-modal/upsert-experiment-modal.component.html

@@ -161,7 +161,7 @@
     </mat-form-field>
     } @if (assignmentAlgorithmValue === ASSIGNMENT_ALGORITHM.THOMPSON_SAMPLING) {
     <app-ts-configurable-policy-parameters-form
-      [existingPolicyParams]="(selectedExperiment$ | async)?.thompsonSamplingConfig"
+      [existingPolicyParams]="$safeNavigationMigration((selectedExperiment$ | async)?.thompsonSamplingConfig)"
       [disabled]="isTSFormDisabled"
       (parametersChange)="onTSConfigChange($event)"
       (validationChange)="onTSFormValidityChange($event)"

packages/frontend/projects/upgrade/src/app/features/dashboard/experiments/pages/experiment-details-page/experiment-details-page-content/experiment-conditions-section-card/experiment-conditions-section-card.component.html

@@ -35,7 +35,7 @@
     [actionsDisabled]="vm.restriction.isDisabled"
     [actionsTooltip]="restrictionTooltip"
     [isThompsonSamplingExperiment]="isThompsonSamplingExperiment(vm.experiment)"
-    [prior]="vm.experiment.thompsonSamplingConfig?.priors"
+    [prior]="$safeNavigationMigration(vm.experiment.thompsonSamplingConfig?.priors)"
     (rowAction)="onRowAction($event, vm.experiment.id, appContext)"
     (editWeights)="onEditWeights($event, vm.experiment)"
     (editPrior)="onEditPrior($event, vm.experiment)"

packages/frontend/projects/upgrade/src/app/features/dashboard/experiments/pages/experiment-details-page/experiment-details-page-content/experiment-enrollment-data-section-card/enrollment-condition-table/enrollment-condition-table.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnChanges, OnDestroy, OnInit } from '@angular/core';
+import { Component, Input, OnChanges, OnDestroy, OnInit, ChangeDetectionStrategy } from '@angular/core';
 import {
   ASSIGNMENT_UNIT,
   ExperimentVM,
@@ -16,6 +16,7 @@ import { formatDecisionPointDisplay } from '../../../../../experiment-decision-p
   selector: 'app-enrollment-condition-table',
   templateUrl: './enrollment-condition-table.component.html',
   styleUrls: ['./enrollment-condition-table.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
   imports: [TranslateModule, EnrollmentConditionExpandableRowComponent, MatProgressSpinnerModule],
 })
 export class EnrollmentConditionTableComponent implements OnChanges, OnInit, OnDestroy {

packages/frontend/projects/upgrade/src/app/features/dashboard/experiments/pages/experiment-details-page/experiment-details-page-content/experiment-enrollment-data-section-card/enrollment-over-time/enrollment-over-time.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnChanges, SimpleChanges, OnInit, OnDestroy } from '@angular/core';
+import { Component, Input, OnChanges, SimpleChanges, OnInit, OnDestroy, ChangeDetectionStrategy } from '@angular/core';
 import { ASSIGNMENT_UNIT } from 'upgrade_types';
 import {
   ExperimentVM,
@@ -51,6 +51,7 @@ const INDIVIDUAL = 'individual';
     MatCheckboxModule,
   ],
   styleUrls: ['./enrollment-over-time.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
   standalone: true,
 })
 export class EnrollmentOverTimeComponent implements OnChanges, OnInit, OnDestroy {