[OP-19470] Update Angular to v22

Force updates Angular dependencies: ng update @angular/core@22 @angular/cli@22 --force And performs automated upgrade: = Adds `ChangeDetectionStrategy.Eager` to all components. - Adds 'withXhr' to 'provideHttpClient' function calls when the 'HttpXhrBackend' is used. - Wraps optional chaining expressions in $safeNavigationMigration(). - Disables the 'nullishCoalescingNotNullable & optionalChainNotNullable extended diagnostics. - Adds 'strictTemplates: false' in tsconfig.json when not set. https://community.openproject.org/wp/OP-19470
2026-06-13 19:20:00 +00:00 · 2026-06-07 14:56:33 +01:00
parent ead911e214
commit 7020778ee5
149 changed files with 4218 additions and 1561 deletions
@@ -6,8 +6,8 @@
  "private": true,
  "devDependencies": {
    "@angular-builders/custom-esbuild": "^21.0.3",
-    "@angular-devkit/build-angular": "^21.2.12",
-    "@angular/language-service": "21.2.15",
+    "@angular-devkit/build-angular": "^22.0.0",
+    "@angular/language-service": "22.0.0",
    "@eslint/js": "^10.0.1",
    "@html-eslint/eslint-plugin": "^0.60.0",
    "@html-eslint/parser": "^0.60.0",
@@ -50,24 +50,24 @@
    "playwright": "^1.59.1",
    "source-map-explorer": "^2.5.2",
    "ts-node": "~10.9.2",
-    "typescript": "^5.9.3",
+    "typescript": "^6.0.3",
    "typescript-eslint": "^8.59.4",
    "vitest": "^4.1.7",
    "wscat": "^6.1.0"
  },
  "dependencies": {
-    "@angular/animations": "^21.2.14",
+    "@angular/animations": "^22.0.0",
    "@angular/cdk": "^21.2.12",
-    "@angular/cli": "^21.2.12",
-    "@angular/common": "^21.2.14",
-    "@angular/compiler": "^21.2.14",
-    "@angular/compiler-cli": "^21.2.14",
-    "@angular/core": "^21.2.14",
-    "@angular/elements": "^21.2.14",
-    "@angular/forms": "^21.2.14",
-    "@angular/platform-browser": "^21.2.14",
-    "@angular/platform-browser-dynamic": "^21.2.14",
-    "@angular/router": "^21.2.14",
+    "@angular/cli": "^22.0.0",
+    "@angular/common": "^22.0.0",
+    "@angular/compiler": "^22.0.0",
+    "@angular/compiler-cli": "^22.0.0",
+    "@angular/core": "^22.0.0",
+    "@angular/elements": "^22.0.0",
+    "@angular/forms": "^22.0.0",
+    "@angular/platform-browser": "^22.0.0",
+    "@angular/platform-browser-dynamic": "^22.0.0",
+    "@angular/router": "^22.0.0",
    "@appsignal/javascript": "^1.6.1",
    "@appsignal/plugin-breadcrumbs-console": "^1.1.37",
    "@appsignal/plugin-breadcrumbs-network": "^1.1.24",
@@ -28,7 +28,7 @@

 import { ApplicationRef, DoBootstrap, inject, Injector, NgModule, provideAppInitializer } from '@angular/core';
 import { A11yModule } from '@angular/cdk/a11y';
-import { HTTP_INTERCEPTORS, HttpClient, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { HTTP_INTERCEPTORS, HttpClient, provideHttpClient, withInterceptorsFromDi, withXhr } from '@angular/common/http';
 import { ReactiveFormsModule } from '@angular/forms';
 import {
  OpContextMenuTrigger,
@@ -364,7 +364,7 @@ export function runBootstrap(appRef:ApplicationRef) {
    ConfirmDialogService,
    RevitAddInSettingsButtonService,
    CopyToClipboardService,
-    provideHttpClient(withInterceptorsFromDi()),
+    provideHttpClient(withXhr(), withInterceptorsFromDi()),
  ],
 })
 export class OpenProjectModule implements DoBootstrap {
@@ -45,7 +45,7 @@ import { TimezoneService } from 'core-app/core/datetime/timezone.service';
 import { HalResourceNotificationService } from 'core-app/features/hal/services/hal-resource-notification.service';
 import { OpenprojectHalModule } from 'core-app/features/hal/openproject-hal.module';
 import { provideHttpClientTesting } from '@angular/common/http/testing';
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi, withXhr } from '@angular/common/http';

 describe('WorkPackageCache', () => {
  let injector:Injector;
@@ -70,7 +70,7 @@ describe('WorkPackageCache', () => {
        { provide: ToastService, useValue: {} },
        { provide: HalResourceNotificationService, useValue: { handleRawError: () => false } },
        { provide: WorkPackageNotificationService, useValue: {} },
-        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClient(withXhr(), withInterceptorsFromDi()),
        provideHttpClientTesting(),
      ]
    });
@@ -27,7 +27,7 @@
 //++

 import { TestBed } from '@angular/core/testing';
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi, withXhr } from '@angular/common/http';
 import { PathHelperService } from 'core-app/core/path-helper/path-helper.service';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
 import { ConfigurationService } from 'core-app/core/config/configuration.service';
@@ -56,7 +56,7 @@ describe('TimezoneService', () => {
        { provide: ConfigurationService, useValue: ConfigurationServiceStub },
        PathHelperService,
        TimezoneService,
-        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClient(withXhr(), withInterceptorsFromDi()),
      ],
    });

@@ -27,7 +27,7 @@
 //++

 import { TestBed } from '@angular/core/testing';
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi, withXhr } from '@angular/common/http';
 import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { States } from 'core-app/core/states/states.service';
 import { ConfigurationService } from 'core-app/core/config/configuration.service';
@@ -41,7 +41,7 @@ describe('WeekdayService', () => {
        WeekdayResourceService,
        { provide: States, useValue: new States() },
        { provide: ConfigurationService, useValue: {} },
-        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClient(withXhr(), withInterceptorsFromDi()),
        provideHttpClientTesting(),
      ],
    });
@@ -27,7 +27,7 @@
 //++

 import { TestBed } from '@angular/core/testing';
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi, withXhr } from '@angular/common/http';
 import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { States } from 'core-app/core/states/states.service';
 import { ConfigurationService } from 'core-app/core/config/configuration.service';
@@ -39,7 +39,7 @@ describe('MainMenuToggleService', () => {
      providers: [
        { provide: States, useValue: new States() },
        { provide: ConfigurationService, useValue: {} },
-        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClient(withXhr(), withInterceptorsFromDi()),
        provideHttpClientTesting(),
      ],
    });
@@ -41,7 +41,7 @@ export const appBaseSelector = 'openproject-base';
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class ApplicationBaseComponent {
 }
@@ -27,7 +27,7 @@
 //++

 import { TestBed } from '@angular/core/testing';
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi, withXhr } from '@angular/common/http';
 import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { States } from 'core-app/core/states/states.service';
 import { ConfigurationService } from 'core-app/core/config/configuration.service';
@@ -42,7 +42,7 @@ describe('AttachmentsResourceService', () => {
        { provide: States, useValue: new States() },
        { provide: ConfigurationService, useValue: {} },
        { provide: OpUploadService, useValue: {} },
-        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClient(withXhr(), withInterceptorsFromDi()),
        provideHttpClientTesting(),
      ],
    });
@@ -41,7 +41,7 @@ import { ICapability } from 'core-app/core/state/capabilities/capability.model';
 import URI from 'urijs';
 import { ApiV3ListParameters } from 'core-app/core/apiv3/paths/apiv3-list-resource.interface';
 import { CurrentUserQuery } from 'core-app/core/current-user/current-user.query';
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi, withXhr } from '@angular/common/http';

 const globalCapability:ICapability = {
  id: 'placeholder_users/read/g-3',
@@ -141,7 +141,7 @@ describe('Capabilities service', () => {
        CurrentUserStore,
        CurrentUserQuery,
        CurrentUserService,
-        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClient(withXhr(), withInterceptorsFromDi()),
        provideHttpClientTesting(),
    ]
 });
@@ -27,7 +27,7 @@
 //++

 import { TestBed } from '@angular/core/testing';
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi, withXhr } from '@angular/common/http';
 import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { States } from 'core-app/core/states/states.service';
 import { ConfigurationService } from 'core-app/core/config/configuration.service';
@@ -40,7 +40,7 @@ describe('InAppNotificationsResourceService', () => {
        InAppNotificationsResourceService,
        { provide: States, useValue: new States() },
        { provide: ConfigurationService, useValue: {} },
-        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClient(withXhr(), withInterceptorsFromDi()),
        provideHttpClientTesting(),
      ],
    });
@@ -27,7 +27,7 @@
 //++

 import { TestBed } from '@angular/core/testing';
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi, withXhr } from '@angular/common/http';
 import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { States } from 'core-app/core/states/states.service';
 import { ConfigurationService } from 'core-app/core/config/configuration.service';
@@ -40,7 +40,7 @@ describe('PrincipalsResourceService', () => {
        PrincipalsResourceService,
        { provide: States, useValue: new States() },
        { provide: ConfigurationService, useValue: {} },
-        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClient(withXhr(), withInterceptorsFromDi()),
        provideHttpClientTesting(),
      ],
    });
@@ -27,7 +27,7 @@
 //++

 import { TestBed } from '@angular/core/testing';
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi, withXhr } from '@angular/common/http';
 import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { States } from 'core-app/core/states/states.service';
 import { ConfigurationService } from 'core-app/core/config/configuration.service';
@@ -40,7 +40,7 @@ describe('ViewsResourceService', () => {
        ViewsResourceService,
        { provide: States, useValue: new States() },
        { provide: ConfigurationService, useValue: {} },
-        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClient(withXhr(), withInterceptorsFromDi()),
        provideHttpClientTesting(),
      ],
    });
@@ -54,7 +54,7 @@ import { JobStatusModalService } from 'core-app/features/job-status/job-status-m
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class BcfExportButtonComponent extends UntilDestroyedMixin implements OnInit, OnDestroy {
  readonly I18n = inject(I18nService);
@@ -45,7 +45,7 @@ import { BcfPathHelperService } from 'core-app/features/bim/bcf/helper/bcf-path-
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class BcfImportButtonComponent {
  readonly I18n = inject(I18nService);
@@ -51,7 +51,7 @@ import { HalResource } from 'core-app/features/hal/resources/hal-resource';
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class AddListModalComponent extends OpModalComponent implements OnInit {
  readonly boardActions = inject(BoardActionsRegistryService);
@@ -38,7 +38,7 @@ import { UserResource } from 'core-app/features/hal/resources/user-resource';
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class AssigneeBoardHeaderComponent {
  readonly pathHelper = inject(PathHelperService);
@@ -37,7 +37,7 @@ import { StatusResource } from 'core-app/features/hal/resources/status-resource'
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class StatusBoardHeaderComponent {
  readonly I18n = inject(I18nService);
@@ -39,7 +39,7 @@ import idFromLink from 'core-app/features/hal/helpers/id-from-link';
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class SubprojectBoardHeaderComponent {
  readonly pathHelper = inject(PathHelperService);
@@ -40,7 +40,7 @@ import idFromLink from 'core-app/features/hal/helpers/id-from-link';
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class SubtasksBoardHeaderComponent implements OnInit {
  readonly pathHelper = inject(PathHelperService);
@@ -38,7 +38,7 @@ import { PathHelperService } from 'core-app/core/path-helper/path-helper.service
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class VersionBoardHeaderComponent {
  readonly I18n = inject(I18nService);
@@ -20,7 +20,7 @@ import { ApiV3Service } from 'core-app/core/apiv3/api-v3.service';
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class BoardFilterComponent extends UntilDestroyedMixin implements AfterViewInit {
  private readonly currentProjectService = inject(CurrentProjectService);
@@ -44,7 +44,7 @@ import { BoardActionService } from 'core-app/features/boards/board/board-actions
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class BoardListMenuComponent {
  readonly opModalService = inject(OpModalService);
@@ -17,7 +17,7 @@ import { Board } from 'core-app/features/boards/board/board';
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class BoardConfigurationModalComponent extends OpModalComponent implements OnInit, OnDestroy {
  readonly I18n = inject(I18nService);
@@ -12,7 +12,7 @@ import { CardHighlightingMode } from 'core-app/features/work-packages/components
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class BoardHighlightingTabComponent implements TabComponent, OnInit {
  readonly injector = inject(Injector);
@@ -53,7 +53,7 @@ import { HalResourceService } from 'core-app/features/hal/services/hal-resource.
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class BoardInlineAddAutocompleterComponent implements AfterViewInit {
  private readonly querySpace = inject(IsolatedQuerySpace);
@@ -16,7 +16,7 @@ import { Observable } from 'rxjs';
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class BoardsMenuButtonComponent {
  readonly I18n = inject(I18nService);
@@ -36,7 +36,7 @@ import { HalResourceService } from 'core-app/features/hal/services/hal-resource.
 import { OpenprojectHalModule } from 'core-app/features/hal/openproject-hal.module';
 import { HalLink, HalLinkInterface } from 'core-app/features/hal/hal-link/hal-link';
 import { provideHttpClientTesting } from '@angular/common/http/testing';
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi, withXhr } from '@angular/common/http';
 import type { Mock } from 'vitest';
 type Spy = Mock;

@@ -57,7 +57,7 @@ describe('HalResource', () => {
        HalResourceService,
        States,
        I18nService,
-        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClient(withXhr(), withInterceptorsFromDi()),
        provideHttpClientTesting(),
      ]
    }).compileComponents();
@@ -49,7 +49,7 @@ import isNewResource from 'core-app/features/hal/helpers/is-new-resource';
 import { WeekdayService } from 'core-app/core/days/weekday.service';
 import { of } from 'rxjs';
 import { provideHttpClientTesting } from '@angular/common/http/testing';
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi, withXhr } from '@angular/common/http';

 describe('WorkPackage', () => {
  let halResourceService:HalResourceService;
@@ -87,7 +87,7 @@ describe('WorkPackage', () => {
        { provide: WorkPackageCreateService, useValue: {} },
        { provide: StateService, useValue: {} },
        { provide: SchemaCacheService, useValue: {} },
-        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClient(withXhr(), withInterceptorsFromDi()),
        provideHttpClientTesting(),
      ]
    }).compileComponents();
@@ -27,7 +27,7 @@
 //++

 import { TestBed } from '@angular/core/testing';
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi, withXhr } from '@angular/common/http';
 import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { StateService } from '@uirouter/core';
 import { States } from 'core-app/core/states/states.service';
@@ -42,7 +42,7 @@ describe('HalResourceNotificationService', () => {
        { provide: States, useValue: new States() },
        { provide: StateService, useValue: {} },
        { provide: SchemaCacheService, useValue: {} },
-        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClient(withXhr(), withInterceptorsFromDi()),
        provideHttpClientTesting(),
      ],
    });
@@ -11,7 +11,7 @@ import { GridPageComponent } from 'core-app/shared/components/grids/grid/page/gr
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class MyPageComponent extends GridPageComponent {
  protected gridScopePath():string {
@@ -45,7 +45,7 @@ import { populateInputsFromDataset } from 'core-app/shared/components/dataset-in
  providers: GRID_PROVIDERS,
  standalone: true,
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class DashboardComponent extends GridPageComponent implements OnInit {
  @Input() projectIdentifier:string;
@@ -37,7 +37,7 @@
          [src]="image.empty_state" class="op-add-existing-pane--empty-state-image" alt=""/>
      }
      <span
-        [innerHTML]="(noResultsFound$ | async)?.text"
+        [innerHTML]="$safeNavigationMigration((noResultsFound$ | async)?.text)"
        class="op-add-existing-pane--empty-state-text"
      ></span>
    </div>
@@ -41,7 +41,7 @@ import { AbstractDateTimeValueController } from '../abstract-filter-date-time-va
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class FilterDateTimeValueComponent extends AbstractDateTimeValueController implements OnInit {
  @HostBinding('id') get id() {
@@ -41,7 +41,7 @@ import { validDate } from 'core-app/shared/components/datepicker/helpers/date-mo
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class FilterDateTimesValueComponent extends AbstractDateTimeValueController implements OnInit {
  @HostBinding('id') get id() {
@@ -42,7 +42,7 @@ import moment from 'moment-timezone';
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class FilterDateValueComponent extends UntilDestroyedMixin {
  readonly timezoneService = inject(TimezoneService);
@@ -42,7 +42,7 @@ import { QueryFilterInstanceResource } from 'core-app/features/hal/resources/que
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class FilterDatesValueComponent extends UntilDestroyedMixin {
  readonly timezoneService = inject(TimezoneService);
@@ -42,7 +42,7 @@ import { QueryFilterResource } from 'core-app/features/hal/resources/query-filte
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class FilterIntegerValueComponent extends UntilDestroyedMixin {
  readonly I18n = inject(I18nService);
@@ -41,7 +41,7 @@ import { QueryFilterInstanceResource } from 'core-app/features/hal/resources/que
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class FilterStringValueComponent extends UntilDestroyedMixin {
  readonly I18n = inject(I18nService);
@@ -49,7 +49,7 @@ import { WorkPackageViewBaselineService } from 'core-app/features/work-packages/
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class QueryFilterComponent implements OnInit {
  readonly wpTableFilters = inject(WorkPackageViewFiltersService);
@@ -45,7 +45,7 @@ import { QueryFilterResource } from 'core-app/features/hal/resources/query-filte
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class WorkPackageFilterByTextInputComponent extends UntilDestroyedMixin {
  readonly I18n = inject(I18nService);
@@ -40,7 +40,7 @@ import { PathHelperService } from 'core-app/core/path-helper/path-helper.service
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class WorkPackageBreadcrumbParentComponent {
  protected readonly I18n = inject(I18nService);
@@ -39,7 +39,7 @@ import { PathHelperService } from 'core-app/core/path-helper/path-helper.service
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class WorkPackageBreadcrumbComponent {
  private I18n = inject(I18nService);
@@ -43,7 +43,7 @@ import { SchemaCacheService } from 'core-app/core/schemas/schema-cache.service';
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class WorkPackageStatusButtonComponent extends UntilDestroyedMixin implements OnInit {
  readonly I18n = inject(I18nService);
@@ -38,7 +38,7 @@ import { WorkPackageCreateService } from 'core-app/features/work-packages/compon
 import { HalResourceEditingService } from 'core-app/shared/components/fields/edit/services/hal-resource-editing.service';
 import { WorkPackageResource } from 'core-app/features/hal/resources/work-package-resource';
 import { TypeResource } from 'core-app/features/hal/resources/type-resource';
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi, withXhr } from '@angular/common/http';
 import { States } from 'core-app/core/states/states.service';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
 import { ToastService } from 'core-app/shared/components/toaster/toast.service';
@@ -94,7 +94,7 @@ describe('WorkPackageFilterValues', () => {
        WorkPackageCreateService,
        HalResourceEditingService,
        WorkPackagesActivityService,
-        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClient(withXhr(), withInterceptorsFromDi()),
      ]
    }).compileComponents();

@@ -36,7 +36,7 @@ import { EditFormComponent } from 'core-app/shared/components/fields/edit/edit-f
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class WorkPackageReplacementLabelComponent implements OnInit {
  protected wpeditForm = inject(EditFormComponent);
@@ -45,7 +45,7 @@ import {
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class WorkPackageFormAttributeGroupComponent extends UntilDestroyedMixin {
  readonly I18n = inject(I18nService);
@@ -66,7 +66,7 @@ import { delegate, DelegateEvent } from '@knowledgecode/delegate';
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class WorkPackageInlineCreateComponent extends UntilDestroyedMixin implements OnInit, AfterViewInit {
  readonly injector = inject(Injector);
@@ -54,7 +54,7 @@ import { WorkPackageRelationsService } from 'core-app/features/work-packages/com
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class WorkPackageChildrenQueryComponent extends WorkPackageRelationQueryBase implements OnInit {
  protected wpRelationsHierarchyService = inject(WorkPackageRelationsHierarchyService);
@@ -58,7 +58,7 @@ import { FilterOperator } from 'core-app/shared/helpers/api-v3/api-v3-filter-bui
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class WpRelationInlineAddExistingComponent {
  protected readonly parent = inject(WorkPackageInlineCreateComponent);
@@ -53,7 +53,7 @@ import { GroupDescriptor } from 'core-app/features/work-packages/components/wp-s
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class WorkPackageRelationQueryComponent extends WorkPackageRelationQueryBase implements OnInit {
  protected readonly PathHelper = inject(PathHelperService);
@@ -18,7 +18,7 @@ import { Highlighting } from 'core-app/features/work-packages/components/wp-fast
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class WorkPackageRelationRowComponent extends UntilDestroyedMixin implements OnInit {
  protected apiV3Service = inject(ApiV3Service);
@@ -13,7 +13,7 @@ import { WorkPackageRelationsService } from '../wp-relations.service';
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class WorkPackageRelationsCreateComponent {
  readonly I18n = inject(I18nService);
@@ -37,7 +37,7 @@ import { I18nService } from 'core-app/core/i18n/i18n.service';
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class WorkPackageRelationsGroupComponent {
  readonly I18n = inject(I18nService);
@@ -46,7 +46,7 @@ import { SchemaCacheService } from 'core-app/core/schemas/schema-cache.service';
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class WorkPackageRelationsHierarchyComponent extends UntilDestroyedMixin implements OnInit {
  readonly apiV3Service = inject(ApiV3Service);
@@ -40,7 +40,7 @@ import { ApiV3Service } from 'core-app/core/apiv3/api-v3.service';
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class WorkPackageOverviewTabComponent extends UntilDestroyedMixin implements OnInit {
  readonly I18n = inject(I18nService);
@@ -40,7 +40,7 @@ import { ApiV3Service } from 'core-app/core/apiv3/api-v3.service';
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class WorkPackageRelationsTabComponent extends UntilDestroyedMixin implements OnInit {
  readonly I18n = inject(I18nService);
@@ -40,7 +40,7 @@ import { ApiV3Service } from 'core-app/core/apiv3/api-v3.service';
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class WorkPackageSubjectComponent extends UntilDestroyedMixin {
  protected uiRouterGlobals = inject(UIRouterGlobals);
@@ -11,7 +11,7 @@ import { WpTableConfigurationModalComponent } from 'core-app/features/work-packa
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class WorkPackagesTableConfigMenuComponent {
  readonly I18n = inject(I18nService);
@@ -17,7 +17,7 @@ import {
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class WpTableConfigurationColumnsTabComponent implements TabComponent, OnInit {
  readonly injector = inject(Injector);
@@ -13,7 +13,7 @@ import { QueryGroupByResource } from 'core-app/features/hal/resources/query-grou
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class WpTableConfigurationDisplaySettingsTabComponent implements TabComponent, OnInit {
  readonly injector = inject(Injector);
@@ -27,7 +27,7 @@ export type SortingMode = 'automatic'|'manual';
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class WpTableConfigurationSortByTabComponent implements TabComponent, OnInit {
  readonly injector = inject(Injector);
@@ -14,7 +14,7 @@ import { StateService } from '@uirouter/angular';
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class WpTableConfigurationTimelinesTabComponent implements TabComponent, OnInit {
  readonly injector = inject(Injector);
@@ -15,7 +15,7 @@ import { SchemaCacheService } from 'core-app/core/schemas/schema-cache.service';
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class WpTableConfigurationRelationSelectorComponent implements OnInit {
  readonly injector = inject(Injector);
@@ -14,7 +14,7 @@

    @if (tabPortalHost) {
      <op-scrollable-tabs [tabs]="availableTabs"
-        [currentTabId]="tabPortalHost.currentTab?.id"
+        [currentTabId]="$safeNavigationMigration(tabPortalHost.currentTab?.id)"
        (tabSelected)="switchTo($event)"
         />
    }
@@ -28,7 +28,7 @@ export const WpTableConfigurationModalPrependToken = new InjectionToken<Componen
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class WpTableConfigurationModalComponent extends OpModalComponent implements OnInit, OnDestroy {
  prependModalComponent = inject<ComponentType<unknown> | null>(WpTableConfigurationModalPrependToken, { optional: true });
@@ -41,7 +41,7 @@ import { populateInputsFromDataset } from 'core-app/shared/components/dataset-in
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class EmbeddedTablesMacroComponent {
  readonly elementRef = inject(ElementRef);
@@ -18,7 +18,7 @@ export const wpTableEntrySelector = 'wp-embedded-table-entry';
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class WorkPackageEmbeddedTableEntryComponent {
  readonly elementRef = inject(ElementRef);
@@ -29,7 +29,7 @@ import { PortalOutletTarget } from 'core-app/shared/components/modal/portal-outl
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class WorkPackageEmbeddedTableComponent extends WorkPackageEmbeddedBaseComponent implements OnInit, AfterViewInit, OnDestroy {
  @Input() public queryId?:string;
@@ -27,7 +27,7 @@ export interface QueryConfigurationLocals {
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class ExternalQueryConfigurationComponent implements OnInit, AfterViewInit {
  @ViewChild('embeddedTableForConfiguration', { static: true }) private embeddedTable:WorkPackageEmbeddedTableComponent;
@@ -20,7 +20,7 @@ import { ExternalQueryConfigurationComponent } from 'core-app/features/work-pack
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class ExternalRelationQueryConfigurationComponent extends ExternalQueryConfigurationComponent {
 }
@@ -26,7 +26,7 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++

-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi, withXhr } from '@angular/common/http';
 import { IsolatedQuerySpace } from 'core-app/features/work-packages/directives/query-space/isolated-query-space';
 import { inject, TestBed } from '@angular/core/testing';
 import { States } from 'core-app/core/states/states.service';
@@ -88,7 +88,7 @@ describe('wpTablePagination Directive', () => {
        ConfigurationService,
        IsolatedQuerySpace,
        I18nService,
-        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClient(withXhr(), withInterceptorsFromDi()),
      ]
    }).compileComponents();
  });
@@ -92,7 +92,7 @@ import { IDay } from 'core-app/core/state/days/day.model';
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class WorkPackageTimelineTableController extends UntilDestroyedMixin implements AfterViewInit {
  readonly injector = inject(Injector);
@@ -81,7 +81,7 @@ function newSegment(vp:TimelineViewParameters,
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class WorkPackageTableTimelineRelations extends UntilDestroyedMixin implements OnInit {
  readonly injector = inject(Injector);
@@ -42,7 +42,7 @@ import { TodayLineElement } from './wp-timeline.today-line';
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class WorkPackageTableTimelineStaticElements implements OnInit {
  states = inject(States);
@@ -45,7 +45,7 @@ import { WeekdayService } from 'core-app/core/days/weekday.service';
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class WorkPackageTableTimelineGrid implements AfterViewInit {
  private elementRef = inject(ElementRef);
@@ -47,7 +47,7 @@ import {
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class WorkPackageTimelineHeaderController implements OnInit {
  readonly I18n = inject(I18nService);
@@ -43,7 +43,7 @@ import { WorkPackageResource } from 'core-app/features/hal/resources/work-packag
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class WpTabWrapperComponent implements OnInit {
  readonly I18n = inject(I18nService);
@@ -1,4 +1,4 @@
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi, withXhr } from '@angular/common/http';
 import { Component, Input } from '@angular/core';
 import { StateService } from '@uirouter/core';
 import { TestBed } from '@angular/core/testing';
@@ -40,7 +40,7 @@ describe('WpTabsService', () => {
      imports: [],
      providers: [
        { provide: StateService, useValue: { includes: () => false } },
-        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClient(withXhr(), withInterceptorsFromDi()),
      ]
    });
    service = TestBed.inject(WorkPackageTabsService);
@@ -36,7 +36,7 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class WorkPackageTypeStatusComponent {
  @Input() workPackage:WorkPackageResource;
@@ -50,7 +50,7 @@ export const wpBaseSelector = 'work-packages-base';
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class WorkPackagesBaseComponent {
 }
@@ -19,7 +19,7 @@ import { ID } from '@datorama/akita';
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class MembersAutocompleterComponent extends UserAutocompleterComponent implements OnInit {
  @Input() principalType?:PrincipalType;
@@ -171,7 +171,7 @@
        <div class="op-autocompleter--wp-content">
          <span
            [ngOptionHighlight]="search"
-            [textContent]="item.project?.name"
+            [textContent]="$safeNavigationMigration(item.project?.name)"
            class="op-autocompleter--wp-project"
          ></span>
          <span
@@ -179,8 +179,8 @@
            [ngOptionHighlight]="search"
          >{{ item.formattedId }}</span>
          <span
-            [textContent]="item.status?.name"
-            [ngClass]="highlighting('status',item.status?.id)"
+            [textContent]="$safeNavigationMigration(item.status?.name)"
+            [ngClass]="highlighting('status',$safeNavigationMigration(item.status?.id))"
            class="op-autocompleter--wp-status"
          ></span>
        </div>
@@ -8,7 +8,7 @@ import { NgSelectModule } from '@ng-select/ng-select';

 import { OpAutocompleterComponent } from './op-autocompleter.component';
 import { By } from '@angular/platform-browser';
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi, withXhr } from '@angular/common/http';

@Component({
  selector: 'op-test-autocompleter',
@@ -88,7 +88,7 @@ describe('autocompleter', () => {
      declarations: [OpAutocompleterComponent],
      schemas: [NO_ERRORS_SCHEMA],
      imports: [NgSelectModule],
-      providers: [States, provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()],
+      providers: [States, provideHttpClient(withXhr(), withInterceptorsFromDi()), provideHttpClientTesting()],
    }).compileComponents();

    fixture = TestBed.createComponent(OpAutocompleterComponent);
@@ -343,7 +343,7 @@ describe('derived autocompleter', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [TestAutocompleterComponent],
-      providers: [States, provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()],
+      providers: [States, provideHttpClient(withXhr(), withInterceptorsFromDi()), provideHttpClientTesting()],
    }).compileComponents();
  });

@@ -27,7 +27,7 @@
 //++

 import { TestBed } from '@angular/core/testing';
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi, withXhr } from '@angular/common/http';
 import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing';
 import { firstValueFrom } from 'rxjs';

@@ -54,7 +54,7 @@ describe('OpAutocompleterService', () => {
        States,
        OpAutocompleterService,
        { provide: SchemaCacheService, useValue: { ensureLoaded: () => Promise.resolve() } },
-        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClient(withXhr(), withInterceptorsFromDi()),
        provideHttpClientTesting(),
      ],
    });
@@ -36,7 +36,7 @@ import { CreateAutocompleterComponent } from 'core-app/shared/components/autocom
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class WorkPackageAutocompleterComponent extends CreateAutocompleterComponent implements AfterViewInit {
 }
@@ -42,7 +42,7 @@ import { TimezoneService } from 'core-app/core/datetime/timezone.service';
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class OpDateTimeComponent implements OnInit {
  readonly timezoneService = inject(TimezoneService);
@@ -56,7 +56,7 @@ import {
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class OpModalSingleDatePickerComponent implements ControlValueAccessor, OnInit, AfterContentInit {
  readonly I18n = inject(I18nService);
@@ -40,7 +40,7 @@ export const selectableTitleIdentifier = 'editable-toolbar-title';
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class EditableToolbarTitleComponent implements OnInit, OnChanges {
  readonly injector = inject(Injector);
@@ -55,7 +55,7 @@ import * as Turbo from '@hotwired/turbo';
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class EditFormComponent extends EditForm<HalResource> implements OnInit, OnDestroy {
  readonly injector:Injector;
@@ -19,7 +19,7 @@ import { ResourceChangeset } from 'core-app/shared/components/fields/changeset/r
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class EditFormPortalComponent implements OnInit, OnDestroy, AfterViewInit {
  readonly injector = inject(Injector);
@@ -38,7 +38,7 @@ import { EditFieldComponent } from 'core-app/shared/components/fields/edit/edit-
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class EditFieldControlsComponent {
  @Input() public cancelTitle:string;
@@ -44,7 +44,7 @@ import { EditFieldComponent } from 'core-app/shared/components/fields/edit/edit-
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class BooleanEditFieldComponent extends EditFieldComponent {
  public updateValue(newValue:boolean) {
@@ -40,7 +40,7 @@ import { WorkPackageResource } from 'core-app/features/hal/resources/work-packag
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class CombinedDateEditFieldComponent extends DatePickerEditFieldComponent implements OnInit {
  dates = '';
@@ -40,7 +40,7 @@ import moment from 'moment-timezone';
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class DaysDurationEditFieldComponent extends DatePickerEditFieldComponent implements OnInit {
  public get formattedValue():number {
@@ -45,7 +45,7 @@ import { EditFieldComponent } from 'core-app/shared/components/fields/edit/edit-
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class FloatEditFieldComponent extends EditFieldComponent {
  public locale = I18n.locale;
@@ -44,7 +44,7 @@ import { EditFieldComponent } from 'core-app/shared/components/fields/edit/edit-
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class IntegerEditFieldComponent extends EditFieldComponent {
  public locale = I18n.locale;
@@ -30,7 +30,7 @@
  </ng-template>
  @if (showAddNewUserButton) {
    <ng-template ng-footer-tmp>
-      <op-invite-user-button [projectId]="resource.project?.id"
+      <op-invite-user-button [projectId]="$safeNavigationMigration(resource.project?.id)"
        (invited)="selectedOption = $event"
       />
    </ng-template>
@@ -35,7 +35,7 @@ import { EditFieldComponent } from 'core-app/shared/components/fields/edit/edit-
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class PlainFormattableEditFieldComponent extends EditFieldComponent {
  // only exists because the template is reused and the property is required there.
@@ -55,7 +55,7 @@ interface ProjectStatusResource extends HalResource {
  // TODO: This component has been partially migrated to be zoneless-compatible.
  // After testing, this should be updated to ChangeDetectionStrategy.OnPush.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class ProjectStatusEditFieldComponent extends EditFieldComponent implements OnInit {
  @ViewChild(NgSelectComponent, { static: true }) public ngSelectComponent:NgSelectComponent;
--- a/Show More
+++ b/Show More