Merge pull request #23588 from opf/code-maintenance/angular-22

[OP-19470] Upgrade Angular to v22
2026-06-13 19:20:00 +00:00 · 2026-06-10 14:01:14 +01:00
parent f389bb1c9b afe036a0db
commit 8127d71d6a
178 changed files with 2592 additions and 7046 deletions
@@ -124,7 +124,7 @@ jobs:
          bundler-cache: true
      - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6
        with:
-          node-version: 22.15
+          node-version: 22.22.3
          package-manager-cache: false
          cache: npm
          cache-dependency-path: |
@@ -26,7 +26,7 @@ jobs:
      - name: Set up Node
        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6
        with:
-          node-version: '22.15'
+          node-version: '22.22.3'
          package-manager-cache: false
          cache: npm
          cache-dependency-path: frontend/package-lock.json
@@ -37,7 +37,7 @@ jobs:
      - name: Set up Node.js
        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6
        with:
-          node-version: '22.21'
+          node-version: '22.22.3'
          package-manager-cache: false

      - name: Required git config
@@ -41,7 +41,7 @@ jobs:

      - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6
        with:
-          node-version: '22.15'
+          node-version: '22.22.3'
          package-manager-cache: false

      - name: Install Dependencies
@@ -8,7 +8,7 @@

 - **Size**: Large monorepo (~840MB, ~1M+ lines of code)
 - **Backend**: Ruby 3.4.7, Rails ~8.0.3
- **Frontend**: Node.js 22.21.0, npm 10.1.0+, TypeScript
+- **Frontend**: Node.js 22.22.3 or 24.15.0+, npm 10.9.8+, TypeScript
 - **Database**: PostgreSQL (required)
 - **Architecture**: Server-rendered HTML with Hotwire (Turbo + Stimulus). Legacy Angular components exist and are being migrated to custom elements. Uses GitHub's Primer Design System via ViewComponent.
 - **Editions**: Community, Enterprise (SSO, LDAP, SCIM), and BIM (construction industry, code in `modules/bim/`)
@@ -17,7 +17,7 @@

 **ALWAYS verify versions before building:**
 - Ruby: `3.4.7` (see `.ruby-version`)
- Node: `^22.21.0` (see `package.json` engines)
+- Node: `^22.22.3 || ^24.15.0` (see `package.json` engines)
 - Bundler: Latest 2.x

 ### Local Development Setup
@@ -2,7 +2,7 @@
 ARG RUBY_VERSION
 FROM ruby:${RUBY_VERSION}-trixie

-ENV NODE_VERSION="22.21.0"
+ENV NODE_VERSION="22.22.3"
 ENV DEBIAN_FRONTEND=noninteractive
 ENV BUNDLE_WITHOUT="development:production:docker"

@@ -1,4 +1,4 @@
-FROM node:22.21.0
+FROM node:22.22.3
 LABEL org.opencontainers.image.authors="operations@openproject.com"

 ARG DEV_UID=1000
@@ -6,7 +6,7 @@ ARG BUILDKIT_SBOM_SCAN_STAGE=true
 FROM ruby:${RUBY_VERSION}-slim-trixie AS runtime-base
 LABEL maintainer="operations@openproject.com"

-ARG NODE_VERSION="22.21.0"
+ARG NODE_VERSION="22.22.3"
 ARG BIM_SUPPORT=true
 ENV USE_JEMALLOC=false
 ENV DEBIAN_FRONTEND=noninteractive
@@ -61,7 +61,7 @@ COPY ./docker/prod/setup/preinstall-common.sh ./docker/prod/setup/preinstall-com
 RUN ./docker/prod/setup/preinstall-common.sh

 FROM runtime-base AS build-base
-ARG NODE_VERSION="22.21.0"
+ARG NODE_VERSION="22.22.3"

 # build-only dependencies
 COPY ./docker/prod/setup/preinstall-build.sh ./docker/prod/setup/preinstall-build.sh
@@ -161,11 +161,11 @@ git clone https://github.com/nodenv/node-build.git $(nodenv root)/plugins/node-b

 You can find the latest LTS version here: [nodejs.org/en/download/](https://nodejs.org/en/download/)

-At the time of writing this is v22.21.0 Install and activate it with:
+At the time of writing this is v22.22.3 Install and activate it with:

 ```shell
-nodenv install 22.21.0
-nodenv global 22.21.0
+nodenv install 22.22.3
+nodenv global 22.22.3
 nodenv rehash
 ```

@@ -187,10 +187,10 @@ bundler --version
 4.0.9

 node --version
-v22.21.0
+v22.22.3

 npm --version
-10.5.0
+10.9.8
 ```

 ## Install OpenProject Sources
@@ -115,11 +115,11 @@ nodenv init

 You can find the latest LTS version here: [nodejs.org/en/download](https://nodejs.org/en/download/)

-At the time of writing this is v22.21.0. Install and activate it with:
+At the time of writing this is v22.22.3. Install and activate it with:

 ```shell
-nodenv install 22.21.0
-nodenv global 22.21.0
+nodenv install 22.22.3
+nodenv global 22.22.3
 ```

 #### Update NPM to the latest version
@@ -140,10 +140,10 @@ $ bundler --version
 4.0.3

 node --version
-v22.21.0
+v22.22.3

 npm --version
-10.5.0
+10.9.8
 ```

 ## Install OpenProject
@@ -145,7 +145,7 @@ time to finish.
 To check our Node installation we run `node --version`. It should output something very similar to:

 ```text
-v22.21.0
+v22.22.3
 ```

 ## Installation of OpenProject
@@ -14,7 +14,7 @@

 ## Version Requirements

- Node: `^22.21.0` (see `package.json` engines)
+- Node: `^22.22.3 || ^24.15.0` (see `package.json` engines)

 ## Setup

@@ -5,9 +5,8 @@
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
-    "@angular-builders/custom-esbuild": "^21.0.3",
-    "@angular-devkit/build-angular": "^21.2.12",
-    "@angular/language-service": "21.2.15",
+    "@angular-builders/custom-esbuild": "^22.0.0",
+    "@angular/language-service": "22.0.0",
    "@eslint/js": "^10.0.1",
    "@html-eslint/eslint-plugin": "^0.61.0",
    "@html-eslint/parser": "^0.61.0",
@@ -25,6 +24,7 @@
    "@types/jquery-migrate": "^3.3.3",
    "@types/lodash": "^4.17.24",
    "@types/mousetrap": "^1.6.3",
+    "@types/node": "^22.19.20",
    "@types/pako": "^2.0.4",
    "@types/rails__request.js": "^0.0.1",
    "@types/react": "^19.2.15",
@@ -38,36 +38,37 @@
    "@vitest/browser-playwright": "^4.1.7",
    "@vitest/coverage-v8": "^4.1.7",
    "@vitest/eslint-plugin": "^1.6.18",
+    "angular-eslint": "^22.0.0",
    "browserslist": "^4.28.1",
    "eslint": "^10.3.0",
-    "angular-eslint": "^21.4.0",
    "eslint-plugin-import": "^2.32.0",
    "eslint-plugin-jsx-a11y": "^6.10.2",
    "eslint-plugin-react": "^7.37.5",
    "eslint-plugin-react-hooks": "^7.1.1",
    "globals": "^17.6.0",
    "jsdom": "^29.1.1",
+    "patch-package": "^8.0.1",
    "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/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/animations": "^22.0.0",
+    "@angular/cdk": "^22.0.0",
+    "@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",
@@ -100,8 +101,8 @@
    "@mantine/core": "^9.0.1",
    "@mantine/hooks": "^9.3.0",
    "@mantine/utils": "^6.0.22",
-    "@ng-select/ng-option-highlight": "^21.8.2",
-    "@ng-select/ng-select": "^21.8.0",
+    "@ng-select/ng-option-highlight": "^23.0.0",
+    "@ng-select/ng-select": "^23.0.0",
    "@ngneat/content-loader": "^7.0.0",
    "@openproject/octicons-angular": "^19.35.0",
    "@openproject/primer-view-components": "^0.86.2",
@@ -190,6 +191,7 @@
    "test:watch": "ng test --watch=true",
    "lint": "ng lint",
    "lint:fix": "ng lint --fix",
-    "generate-typings": "tsc -d -p tsconfig.app.json"
+    "generate-typings": "tsc -d -p tsconfig.app.json",
+    "postinstall": "patch-package"
  }
 }
@@ -0,0 +1,74 @@
+diff --git a/node_modules/@kolkov/ngx-gallery/esm2020/lib/ngx-gallery.module.mjs b/node_modules/@kolkov/ngx-gallery/esm2020/lib/ngx-gallery.module.mjs
+index def4186..5d00f28 100644
+--- a/node_modules/@kolkov/ngx-gallery/esm2020/lib/ngx-gallery.module.mjs
+++ b/node_modules/@kolkov/ngx-gallery/esm2020/lib/ngx-gallery.module.mjs
+@@ -1,4 +1,4 @@
+-import { NgModule, Injectable } from '@angular/core';
+import { NgModule, Injectable, InjectionToken } from '@angular/core';
+ import { NgxGalleryComponent } from './ngx-gallery.component';
+ import { NgxGalleryImageComponent } from './ngx-gallery-image/ngx-gallery-image.component';
+ import { NgxGalleryArrowsComponent } from './ngx-gallery-arrows/ngx-gallery-arrows.component';
+@@ -7,7 +7,16 @@ import { NgxGalleryPreviewComponent } from './ngx-gallery-preview/ngx-gallery-pr
+ import { NgxGalleryActionComponent } from './ngx-gallery-action/ngx-gallery-action.component';
+ import { NgxGalleryBulletsComponent } from './ngx-gallery-bullets/ngx-gallery-bullets.component';
+ import { CommonModule } from '@angular/common';
+-import { HAMMER_GESTURE_CONFIG, HammerGestureConfig } from '@angular/platform-browser';
+// Hammer support was removed from @angular/platform-browser.
+// These inert stubs keep the gallery's gesture-config wiring compiling; the
+// config was already non-functional without HammerModule.
+const HAMMER_GESTURE_CONFIG = new InjectionToken('HammerGestureConfig');
+class HammerGestureConfig {
+    constructor() {
+        this.events = [];
+        this.overrides = {};
+    }
+}
+ import * as i0 from "@angular/core";
+ export class CustomHammerConfig extends HammerGestureConfig {
+     constructor() {
+diff --git a/node_modules/@kolkov/ngx-gallery/fesm2015/kolkov-ngx-gallery.mjs b/node_modules/@kolkov/ngx-gallery/fesm2015/kolkov-ngx-gallery.mjs
+index a92208c..38fea6a 100644
+--- a/node_modules/@kolkov/ngx-gallery/fesm2015/kolkov-ngx-gallery.mjs
+++ b/node_modules/@kolkov/ngx-gallery/fesm2015/kolkov-ngx-gallery.mjs
+@@ -1,7 +1,16 @@
+ import * as i0 from '@angular/core';
+-import { Injectable, EventEmitter, Component, ChangeDetectionStrategy, Input, Output, ViewChild, HostListener, ViewEncapsulation, HostBinding, NgModule } from '@angular/core';
+import { Injectable, EventEmitter, Component, ChangeDetectionStrategy, Input, Output, ViewChild, HostListener, ViewEncapsulation, HostBinding, NgModule, InjectionToken } from '@angular/core';
+ import * as i1 from '@angular/platform-browser';
+-import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
+// Hammer support was removed from @angular/platform-browser.
+// These inert stubs keep the gallery's gesture-config wiring compiling; the
+// config was already non-functional without HammerModule.
+const HAMMER_GESTURE_CONFIG = new InjectionToken('HammerGestureConfig');
+class HammerGestureConfig {
+    constructor() {
+        this.events = [];
+        this.overrides = {};
+    }
+}
+ import * as i6 from '@angular/common';
+ import { CommonModule } from '@angular/common';
+ import { trigger, state, style, transition, animate } from '@angular/animations';
+diff --git a/node_modules/@kolkov/ngx-gallery/fesm2020/kolkov-ngx-gallery.mjs b/node_modules/@kolkov/ngx-gallery/fesm2020/kolkov-ngx-gallery.mjs
+index a92208c..38fea6a 100644
+--- a/node_modules/@kolkov/ngx-gallery/fesm2020/kolkov-ngx-gallery.mjs
+++ b/node_modules/@kolkov/ngx-gallery/fesm2020/kolkov-ngx-gallery.mjs
+@@ -1,7 +1,16 @@
+ import * as i0 from '@angular/core';
+-import { Injectable, EventEmitter, Component, ChangeDetectionStrategy, Input, Output, ViewChild, HostListener, ViewEncapsulation, HostBinding, NgModule } from '@angular/core';
+import { Injectable, EventEmitter, Component, ChangeDetectionStrategy, Input, Output, ViewChild, HostListener, ViewEncapsulation, HostBinding, NgModule, InjectionToken } from '@angular/core';
+ import * as i1 from '@angular/platform-browser';
+-import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
+// Hammer support was removed from @angular/platform-browser.
+// These inert stubs keep the gallery's gesture-config wiring compiling; the
+// config was already non-functional without HammerModule.
+const HAMMER_GESTURE_CONFIG = new InjectionToken('HammerGestureConfig');
+class HammerGestureConfig {
+    constructor() {
+        this.events = [];
+        this.overrides = {};
+    }
+}
+ import * as i6 from '@angular/common';
+ import { CommonModule } from '@angular/common';
+ import { trigger, state, style, transition, animate } from '@angular/animations';
@@ -0,0 +1,358 @@
+diff --git a/node_modules/ng-dynamic-component/esm2020/lib/io/io.service.mjs b/node_modules/ng-dynamic-component/esm2020/lib/io/io.service.mjs
+index c6494ab..e0b43d3 100644
+--- a/node_modules/ng-dynamic-component/esm2020/lib/io/io.service.mjs
+++ b/node_modules/ng-dynamic-component/esm2020/lib/io/io.service.mjs
+@@ -23,14 +23,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
+  * @public
+  */
+ export class IoService {
+-    constructor(injector, differs, 
+-    // TODO: Replace ComponentFactoryResolver once new API is created
+-    // @see https://github.com/angular/angular/issues/44926
+-    // eslint-disable-next-line deprecation/deprecation
+-    cfr, options, compInjector, eventArgument, cdr, eventContextProvider) {
+    constructor(injector, differs, options, compInjector, eventArgument, cdr, eventContextProvider) {
+         this.injector = injector;
+         this.differs = differs;
+-        this.cfr = cfr;
+         this.options = options;
+         this.compInjector = compInjector;
+         this.eventArgument = eventArgument;
+@@ -39,9 +34,6 @@ export class IoService {
+         this.lastComponentInst = null;
+         this.lastChangedInputs = new Set();
+         this.inputsDiffer = this.differs.find({}).create();
+-        // TODO: Replace ComponentFactory once new API is created
+-        // @see https://github.com/angular/angular/issues/44926
+-        // eslint-disable-next-line deprecation/deprecation
+         this.compFactory = null;
+         this.outputsShouldDisconnect$ = new Subject();
+         this.inputs = {};
+@@ -156,26 +148,20 @@ export class IoService {
+         differ.forEachChangedItem(addRecordKeyToSet);
+         differ.forEachRemovedItem(addRecordKeyToSet);
+     }
+-    // TODO: Replace ComponentFactory once new API is created
+-    // @see https://github.com/angular/angular/issues/44926
+-    // eslint-disable-next-line deprecation/deprecation
+     resolveCompFactory() {
+         if (!this.compRef) {
+             return null;
+         }
+-        try {
+-            try {
+-                return this.cfr.resolveComponentFactory(this.compRef.componentType);
+-            }
+-            catch (e) {
+-                // Fallback if componentType does not exist (happens on NgComponentOutlet)
+-                return this.cfr.resolveComponentFactory(this.compRef.instance.constructor);
+-            }
+-        }
+-        catch (e) {
+-            // Factory not available - bailout
+        const componentType = this.compRef.componentType ?? this.compRef.instance.constructor;
+        const componentDef = componentType?.ɵcmp ?? componentType?.ɵdir;
+        const outputs = componentDef?.outputs;
+        if (!outputs) {
+             return null;
+         }
+        return Object.keys(outputs).map((propName) => ({
+            propName,
+            templateName: outputs[propName],
+        }));
+     }
+     updateCompFactory() {
+         this.compFactory = this.resolveCompFactory();
+@@ -186,7 +172,7 @@ export class IoService {
+         if (!this.compFactory) {
+             return outputs;
+         }
+-        return this.remapIO(outputs, this.compFactory.outputs);
+        return this.remapIO(outputs, this.compFactory);
+     }
+     updateOutputsEventContext() {
+         if (this.eventContextProvider) {
+@@ -255,11 +241,11 @@ export class IoService {
+         return null;
+     }
+ }
+-/** @nocollapse */ IoService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: IoService, deps: [{ token: i0.Injector }, { token: i0.KeyValueDiffers }, { token: i0.ComponentFactoryResolver }, { token: IoServiceOptions }, { token: DynamicComponentInjectorToken }, { token: IoEventArgumentToken }, { token: i0.ChangeDetectorRef }, { token: IoEventContextProviderToken, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ IoService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: IoService, deps: [{ token: i0.Injector }, { token: i0.KeyValueDiffers }, { token: IoServiceOptions }, { token: DynamicComponentInjectorToken }, { token: IoEventArgumentToken }, { token: i0.ChangeDetectorRef }, { token: IoEventContextProviderToken, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+ /** @nocollapse */ IoService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: IoService });
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: IoService, decorators: [{
+             type: Injectable
+-        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.KeyValueDiffers }, { type: i0.ComponentFactoryResolver }, { type: IoServiceOptions }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.KeyValueDiffers }, { type: IoServiceOptions }, { type: undefined, decorators: [{
+                     type: Inject,
+                     args: [DynamicComponentInjectorToken]
+                 }] }, { type: undefined, decorators: [{
+diff --git a/node_modules/ng-dynamic-component/fesm2015/ng-dynamic-component.mjs b/node_modules/ng-dynamic-component/fesm2015/ng-dynamic-component.mjs
+index 856c361..4ec7055 100644
+--- a/node_modules/ng-dynamic-component/fesm2015/ng-dynamic-component.mjs
+++ b/node_modules/ng-dynamic-component/fesm2015/ng-dynamic-component.mjs
+@@ -60,14 +60,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
+  * @public
+  */
+ class IoService {
+-    constructor(injector, differs, 
+-    // TODO: Replace ComponentFactoryResolver once new API is created
+-    // @see https://github.com/angular/angular/issues/44926
+-    // eslint-disable-next-line deprecation/deprecation
+-    cfr, options, compInjector, eventArgument, cdr, eventContextProvider) {
+    constructor(injector, differs, options, compInjector, eventArgument, cdr, eventContextProvider) {
+         this.injector = injector;
+         this.differs = differs;
+-        this.cfr = cfr;
+         this.options = options;
+         this.compInjector = compInjector;
+         this.eventArgument = eventArgument;
+@@ -76,9 +71,6 @@ class IoService {
+         this.lastComponentInst = null;
+         this.lastChangedInputs = new Set();
+         this.inputsDiffer = this.differs.find({}).create();
+-        // TODO: Replace ComponentFactory once new API is created
+-        // @see https://github.com/angular/angular/issues/44926
+-        // eslint-disable-next-line deprecation/deprecation
+         this.compFactory = null;
+         this.outputsShouldDisconnect$ = new Subject();
+         this.inputs = {};
+@@ -193,26 +185,20 @@ class IoService {
+         differ.forEachChangedItem(addRecordKeyToSet);
+         differ.forEachRemovedItem(addRecordKeyToSet);
+     }
+-    // TODO: Replace ComponentFactory once new API is created
+-    // @see https://github.com/angular/angular/issues/44926
+-    // eslint-disable-next-line deprecation/deprecation
+     resolveCompFactory() {
+         if (!this.compRef) {
+             return null;
+         }
+-        try {
+-            try {
+-                return this.cfr.resolveComponentFactory(this.compRef.componentType);
+-            }
+-            catch (e) {
+-                // Fallback if componentType does not exist (happens on NgComponentOutlet)
+-                return this.cfr.resolveComponentFactory(this.compRef.instance.constructor);
+-            }
+-        }
+-        catch (e) {
+-            // Factory not available - bailout
+        const componentType = this.compRef.componentType ?? this.compRef.instance.constructor;
+        const componentDef = componentType?.ɵcmp ?? componentType?.ɵdir;
+        const outputs = componentDef?.outputs;
+        if (!outputs) {
+             return null;
+         }
+        return Object.keys(outputs).map((propName) => ({
+            propName,
+            templateName: outputs[propName],
+        }));
+     }
+     updateCompFactory() {
+         this.compFactory = this.resolveCompFactory();
+@@ -223,7 +209,7 @@ class IoService {
+         if (!this.compFactory) {
+             return outputs;
+         }
+-        return this.remapIO(outputs, this.compFactory.outputs);
+        return this.remapIO(outputs, this.compFactory);
+     }
+     updateOutputsEventContext() {
+         if (this.eventContextProvider) {
+@@ -292,12 +278,12 @@ class IoService {
+         return null;
+     }
+ }
+-/** @nocollapse */ IoService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: IoService, deps: [{ token: i0.Injector }, { token: i0.KeyValueDiffers }, { token: i0.ComponentFactoryResolver }, { token: IoServiceOptions }, { token: DynamicComponentInjectorToken }, { token: IoEventArgumentToken }, { token: i0.ChangeDetectorRef }, { token: IoEventContextProviderToken, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ IoService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: IoService, deps: [{ token: i0.Injector }, { token: i0.KeyValueDiffers }, { token: IoServiceOptions }, { token: DynamicComponentInjectorToken }, { token: IoEventArgumentToken }, { token: i0.ChangeDetectorRef }, { token: IoEventContextProviderToken, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+ /** @nocollapse */ IoService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: IoService });
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: IoService, decorators: [{
+             type: Injectable
+         }], ctorParameters: function () {
+-        return [{ type: i0.Injector }, { type: i0.KeyValueDiffers }, { type: i0.ComponentFactoryResolver }, { type: IoServiceOptions }, { type: undefined, decorators: [{
+        return [{ type: i0.Injector }, { type: i0.KeyValueDiffers }, { type: IoServiceOptions }, { type: undefined, decorators: [{
+                         type: Inject,
+                         args: [DynamicComponentInjectorToken]
+                     }] }, { type: undefined, decorators: [{
+diff --git a/node_modules/ng-dynamic-component/fesm2020/ng-dynamic-component.mjs b/node_modules/ng-dynamic-component/fesm2020/ng-dynamic-component.mjs
+index 3104fcc..23c4c7e 100644
+--- a/node_modules/ng-dynamic-component/fesm2020/ng-dynamic-component.mjs
+++ b/node_modules/ng-dynamic-component/fesm2020/ng-dynamic-component.mjs
+@@ -60,14 +60,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
+  * @public
+  */
+ class IoService {
+-    constructor(injector, differs, 
+-    // TODO: Replace ComponentFactoryResolver once new API is created
+-    // @see https://github.com/angular/angular/issues/44926
+-    // eslint-disable-next-line deprecation/deprecation
+-    cfr, options, compInjector, eventArgument, cdr, eventContextProvider) {
+    constructor(injector, differs, options, compInjector, eventArgument, cdr, eventContextProvider) {
+         this.injector = injector;
+         this.differs = differs;
+-        this.cfr = cfr;
+         this.options = options;
+         this.compInjector = compInjector;
+         this.eventArgument = eventArgument;
+@@ -76,9 +71,6 @@ class IoService {
+         this.lastComponentInst = null;
+         this.lastChangedInputs = new Set();
+         this.inputsDiffer = this.differs.find({}).create();
+-        // TODO: Replace ComponentFactory once new API is created
+-        // @see https://github.com/angular/angular/issues/44926
+-        // eslint-disable-next-line deprecation/deprecation
+         this.compFactory = null;
+         this.outputsShouldDisconnect$ = new Subject();
+         this.inputs = {};
+@@ -193,26 +185,20 @@ class IoService {
+         differ.forEachChangedItem(addRecordKeyToSet);
+         differ.forEachRemovedItem(addRecordKeyToSet);
+     }
+-    // TODO: Replace ComponentFactory once new API is created
+-    // @see https://github.com/angular/angular/issues/44926
+-    // eslint-disable-next-line deprecation/deprecation
+     resolveCompFactory() {
+         if (!this.compRef) {
+             return null;
+         }
+-        try {
+-            try {
+-                return this.cfr.resolveComponentFactory(this.compRef.componentType);
+-            }
+-            catch (e) {
+-                // Fallback if componentType does not exist (happens on NgComponentOutlet)
+-                return this.cfr.resolveComponentFactory(this.compRef.instance.constructor);
+-            }
+-        }
+-        catch (e) {
+-            // Factory not available - bailout
+        const componentType = this.compRef.componentType ?? this.compRef.instance.constructor;
+        const componentDef = componentType?.ɵcmp ?? componentType?.ɵdir;
+        const outputs = componentDef?.outputs;
+        if (!outputs) {
+             return null;
+         }
+        return Object.keys(outputs).map((propName) => ({
+            propName,
+            templateName: outputs[propName],
+        }));
+     }
+     updateCompFactory() {
+         this.compFactory = this.resolveCompFactory();
+@@ -223,7 +209,7 @@ class IoService {
+         if (!this.compFactory) {
+             return outputs;
+         }
+-        return this.remapIO(outputs, this.compFactory.outputs);
+        return this.remapIO(outputs, this.compFactory);
+     }
+     updateOutputsEventContext() {
+         if (this.eventContextProvider) {
+@@ -292,11 +278,11 @@ class IoService {
+         return null;
+     }
+ }
+-/** @nocollapse */ IoService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: IoService, deps: [{ token: i0.Injector }, { token: i0.KeyValueDiffers }, { token: i0.ComponentFactoryResolver }, { token: IoServiceOptions }, { token: DynamicComponentInjectorToken }, { token: IoEventArgumentToken }, { token: i0.ChangeDetectorRef }, { token: IoEventContextProviderToken, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ IoService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: IoService, deps: [{ token: i0.Injector }, { token: i0.KeyValueDiffers }, { token: IoServiceOptions }, { token: DynamicComponentInjectorToken }, { token: IoEventArgumentToken }, { token: i0.ChangeDetectorRef }, { token: IoEventContextProviderToken, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+ /** @nocollapse */ IoService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: IoService });
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: IoService, decorators: [{
+             type: Injectable
+-        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.KeyValueDiffers }, { type: i0.ComponentFactoryResolver }, { type: IoServiceOptions }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.KeyValueDiffers }, { type: IoServiceOptions }, { type: undefined, decorators: [{
+                     type: Inject,
+                     args: [DynamicComponentInjectorToken]
+                 }] }, { type: undefined, decorators: [{
+diff --git a/node_modules/ng-dynamic-component/lib/io/io.service.d.ts b/node_modules/ng-dynamic-component/lib/io/io.service.d.ts
+index ee7e9a8..b306207 100644
+--- a/node_modules/ng-dynamic-component/lib/io/io.service.d.ts
+++ b/node_modules/ng-dynamic-component/lib/io/io.service.d.ts
+@@ -1,4 +1,4 @@
+-import { ChangeDetectorRef, ComponentFactoryResolver, Injector, KeyValueDiffers, OnDestroy, StaticProvider } from '@angular/core';
+import { ChangeDetectorRef, Injector, KeyValueDiffers, OnDestroy, StaticProvider } from '@angular/core';
+ import { DynamicComponentInjector } from '../component-injector';
+ import { InputsType, OutputsType } from './types';
+ import * as i0 from "@angular/core";
+@@ -16,7 +16,6 @@ export declare class IoServiceOptions {
+ export declare class IoService implements OnDestroy {
+     private injector;
+     private differs;
+-    private cfr;
+     private options;
+     private compInjector;
+     private eventArgument;
+@@ -34,7 +33,7 @@ export declare class IoService implements OnDestroy {
+     private get compRef();
+     private get componentInst();
+     private get componentInstChanged();
+-    constructor(injector: Injector, differs: KeyValueDiffers, cfr: ComponentFactoryResolver, options: IoServiceOptions, compInjector: DynamicComponentInjector, eventArgument: string, cdr: ChangeDetectorRef, eventContextProvider: StaticProvider);
+    constructor(injector: Injector, differs: KeyValueDiffers, options: IoServiceOptions, compInjector: DynamicComponentInjector, eventArgument: string, cdr: ChangeDetectorRef, eventContextProvider: StaticProvider);
+     ngOnDestroy(): void;
+     /**
+      * Call update whenever inputs/outputs may or did change.
+@@ -56,7 +55,7 @@ export declare class IoService implements OnDestroy {
+     private processOutputArgs;
+     private remapIO;
+     private findPropByTplInMapping;
+-    static ɵfac: i0.ɵɵFactoryDeclaration<IoService, [null, null, null, null, null, null, null, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<IoService, [null, null, null, null, null, null, { optional: true; }]>;
+     static ɵprov: i0.ɵɵInjectableDeclaration<IoService>;
+ }
+ //# sourceMappingURL=io.service.d.ts.map
+diff --git a/node_modules/ng-dynamic-component/public-api-alpha.d.ts b/node_modules/ng-dynamic-component/public-api-alpha.d.ts
+index 843e418..1b4b790 100644
+--- a/node_modules/ng-dynamic-component/public-api-alpha.d.ts
+++ b/node_modules/ng-dynamic-component/public-api-alpha.d.ts
+@@ -1,5 +1,4 @@
+ import { ChangeDetectorRef } from '@angular/core';
+-import { ComponentFactoryResolver } from '@angular/core';
+ import { ComponentRef } from '@angular/core';
+ import { DoCheck } from '@angular/core';
+ import { ElementRef } from '@angular/core';
+@@ -387,7 +386,7 @@ export declare class IoService implements OnDestroy {
+     private get compRef();
+     private get componentInst();
+     private get componentInstChanged();
+-    constructor(injector: Injector, differs: KeyValueDiffers, cfr: ComponentFactoryResolver, options: IoServiceOptions, compInjector: DynamicComponentInjector, eventArgument: string, cdr: ChangeDetectorRef, eventContextProvider: StaticProvider);
+    constructor(injector: Injector, differs: KeyValueDiffers, options: IoServiceOptions, compInjector: DynamicComponentInjector, eventArgument: string, cdr: ChangeDetectorRef, eventContextProvider: StaticProvider);
+     ngOnDestroy(): void;
+     /**
+      * Call update whenever inputs/outputs may or did change.
+diff --git a/node_modules/ng-dynamic-component/public-api-beta.d.ts b/node_modules/ng-dynamic-component/public-api-beta.d.ts
+index 843e418..1b4b790 100644
+--- a/node_modules/ng-dynamic-component/public-api-beta.d.ts
+++ b/node_modules/ng-dynamic-component/public-api-beta.d.ts
+@@ -1,5 +1,4 @@
+ import { ChangeDetectorRef } from '@angular/core';
+-import { ComponentFactoryResolver } from '@angular/core';
+ import { ComponentRef } from '@angular/core';
+ import { DoCheck } from '@angular/core';
+ import { ElementRef } from '@angular/core';
+@@ -387,7 +386,7 @@ export declare class IoService implements OnDestroy {
+     private get compRef();
+     private get componentInst();
+     private get componentInstChanged();
+-    constructor(injector: Injector, differs: KeyValueDiffers, cfr: ComponentFactoryResolver, options: IoServiceOptions, compInjector: DynamicComponentInjector, eventArgument: string, cdr: ChangeDetectorRef, eventContextProvider: StaticProvider);
+    constructor(injector: Injector, differs: KeyValueDiffers, options: IoServiceOptions, compInjector: DynamicComponentInjector, eventArgument: string, cdr: ChangeDetectorRef, eventContextProvider: StaticProvider);
+     ngOnDestroy(): void;
+     /**
+      * Call update whenever inputs/outputs may or did change.
+diff --git a/node_modules/ng-dynamic-component/public-api.d.ts b/node_modules/ng-dynamic-component/public-api.d.ts
+index 843e418..1b4b790 100644
+--- a/node_modules/ng-dynamic-component/public-api.d.ts
+++ b/node_modules/ng-dynamic-component/public-api.d.ts
+@@ -1,5 +1,4 @@
+ import { ChangeDetectorRef } from '@angular/core';
+-import { ComponentFactoryResolver } from '@angular/core';
+ import { ComponentRef } from '@angular/core';
+ import { DoCheck } from '@angular/core';
+ import { ElementRef } from '@angular/core';
+@@ -387,7 +386,7 @@ export declare class IoService implements OnDestroy {
+     private get compRef();
+     private get componentInst();
+     private get componentInstChanged();
+-    constructor(injector: Injector, differs: KeyValueDiffers, cfr: ComponentFactoryResolver, options: IoServiceOptions, compInjector: DynamicComponentInjector, eventArgument: string, cdr: ChangeDetectorRef, eventContextProvider: StaticProvider);
+    constructor(injector: Injector, differs: KeyValueDiffers, options: IoServiceOptions, compInjector: DynamicComponentInjector, eventArgument: string, cdr: ChangeDetectorRef, eventContextProvider: StaticProvider);
+     ngOnDestroy(): void;
+     /**
+      * Call update whenever inputs/outputs may or did change.
@@ -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,
@@ -353,7 +353,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(),
      ],
    });
@@ -118,7 +118,8 @@ export class FogUploadService extends OpUploadService {
        observe: 'events',
        headers: { [EXTERNAL_REQUEST_HEADER]: 'true' },
        responseType: 'text',
-        reportProgress: true,
+        reportUploadProgress: true,
+        reportDownloadProgress: true,
      },
    );
  }
@@ -68,7 +68,8 @@ export class LocalUploadService extends OpUploadService {
        observe: 'events',
        withCredentials: true,
        responseType: 'json',
-        reportProgress: true,
+        reportUploadProgress: true,
+        reportDownloadProgress: true,
      },
    ).pipe(share());
  }
@@ -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);
@@ -1,4 +1,4 @@
-import { ApplicationRef, ChangeDetectionStrategy, Component, ComponentFactoryResolver, ElementRef, Injector, OnDestroy, OnInit, ViewChild, inject } from '@angular/core';
+import { ApplicationRef, ChangeDetectionStrategy, Component, ElementRef, Injector, OnDestroy, OnInit, ViewChild, inject } from '@angular/core';
 import { OpModalComponent } from 'core-app/shared/components/modal/modal.component';
 import {
  ActiveTabInterface,
@@ -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);
@@ -25,7 +25,6 @@ export class BoardConfigurationModalComponent extends OpModalComponent implement
  readonly boardConfigurationService = inject(BoardConfigurationService);
  readonly injector = inject(Injector);
  readonly appRef = inject(ApplicationRef);
-  readonly componentFactoryResolver = inject(ComponentFactoryResolver);

  public text = {
    title: this.I18n.t('js.boards.configuration_modal.title'),
@@ -47,7 +46,6 @@ export class BoardConfigurationModalComponent extends OpModalComponent implement
    this.tabPortalHost = new TabPortalOutlet(
      this.boardConfigurationService.tabs,
      this.tabContentOutlet.nativeElement,
-      this.componentFactoryResolver,
      this.appRef,
      this.injector,
    );
@@ -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);
@@ -47,7 +47,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);
@@ -5,8 +5,8 @@
 import { ComponentPortal } from '@angular/cdk/portal';
 import {
  ApplicationRef,
-  ComponentFactoryResolver,
  ComponentRef,
+  createComponent,
  EmbeddedViewRef,
  Injector,
 } from '@angular/core';
@@ -36,7 +36,6 @@ export class TabPortalOutlet {
  constructor(
    public availableTabs:TabInterface[],
    public outletElement:HTMLElement,
-    private componentFactoryResolver:ComponentFactoryResolver,
    private appRef:ApplicationRef,
    private injector:Injector,
  ) {
@@ -96,8 +95,10 @@ export class TabPortalOutlet {
  }

  private createComponent(tab:TabInterface):ActiveTabInterface {
-    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(tab.componentClass);
-    const componentRef = componentFactory.create(this.injector);
+    const componentRef = createComponent(tab.componentClass, {
+      environmentInjector: this.appRef.injector,
+      elementInjector: this.injector,
+    });
    const portal = new ComponentPortal(tab.componentClass, null, this.injector);

    // Attach component view
@@ -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)"
         />
    }
@@ -1,4 +1,4 @@
-import { ApplicationRef, ChangeDetectionStrategy, Component, ComponentFactoryResolver, ElementRef, EventEmitter, InjectionToken, Injector, OnDestroy, OnInit, ViewChild, inject } from '@angular/core';
+import { ApplicationRef, ChangeDetectionStrategy, Component, ElementRef, EventEmitter, InjectionToken, Injector, OnDestroy, OnInit, ViewChild, inject } from '@angular/core';
 import { ConfigurationService } from 'core-app/core/config/configuration.service';
 import { WorkPackageViewColumnsService } from 'core-app/features/work-packages/routing/wp-view-base/view-services/wp-view-columns.service';
 import { WpTableConfigurationService } from 'core-app/features/work-packages/components/wp-table/configuration-modal/wp-table-configuration.service';
@@ -28,14 +28,13 @@ 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 });
  readonly I18n = inject(I18nService);
  readonly injector = inject(Injector);
  readonly appRef = inject(ApplicationRef);
-  readonly componentFactoryResolver = inject(ComponentFactoryResolver);
  readonly loadingIndicator = inject(LoadingIndicatorService);
  readonly querySpace = inject(IsolatedQuerySpace);
  readonly wpStatesInitialization = inject(WorkPackageStatesInitializationService);
@@ -79,7 +78,6 @@ export class WpTableConfigurationModalComponent extends OpModalComponent impleme
    this.tabPortalHost = new TabPortalOutlet(
      this.wpTableConfigurationService.tabs,
      this.tabContentOutlet.nativeElement,
-      this.componentFactoryResolver,
      this.appRef,
      this.injector,
    );
@@ -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>
--- a/Show More
+++ b/Show More