diff --git a/frontend/src/app/features/boards/board/configuration-modal/board-configuration.modal.ts b/frontend/src/app/features/boards/board/configuration-modal/board-configuration.modal.ts
index 2e7dc87f68e..a1e5d16989c 100644
--- a/frontend/src/app/features/boards/board/configuration-modal/board-configuration.modal.ts
+++ b/frontend/src/app/features/boards/board/configuration-modal/board-configuration.modal.ts
@@ -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,
@@ -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,
     );
diff --git a/frontend/src/app/features/work-packages/components/wp-table/configuration-modal/tab-portal-outlet.ts b/frontend/src/app/features/work-packages/components/wp-table/configuration-modal/tab-portal-outlet.ts
index ba76d6a5c86..be59082d8d9 100644
--- a/frontend/src/app/features/work-packages/components/wp-table/configuration-modal/tab-portal-outlet.ts
+++ b/frontend/src/app/features/work-packages/components/wp-table/configuration-modal/tab-portal-outlet.ts
@@ -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
diff --git a/frontend/src/app/features/work-packages/components/wp-table/configuration-modal/wp-table-configuration.modal.ts b/frontend/src/app/features/work-packages/components/wp-table/configuration-modal/wp-table-configuration.modal.ts
index 483eb6797bd..997d82d236b 100644
--- a/frontend/src/app/features/work-packages/components/wp-table/configuration-modal/wp-table-configuration.modal.ts
+++ b/frontend/src/app/features/work-packages/components/wp-table/configuration-modal/wp-table-configuration.modal.ts
@@ -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';
@@ -35,7 +35,6 @@ export class WpTableConfigurationModalComponent extends OpModalComponent impleme
   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,
     );
diff --git a/frontend/src/app/shared/components/editor/components/ckeditor/ckeditor-preview.service.ts b/frontend/src/app/shared/components/editor/components/ckeditor/ckeditor-preview.service.ts
index b4458c945df..e764cc87545 100644
--- a/frontend/src/app/shared/components/editor/components/ckeditor/ckeditor-preview.service.ts
+++ b/frontend/src/app/shared/components/editor/components/ckeditor/ckeditor-preview.service.ts
@@ -26,11 +26,10 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import { ApplicationRef, ComponentFactoryResolver, ComponentRef, Injectable, Injector, inject } from '@angular/core';
+import { ApplicationRef, ComponentRef, Injectable, Injector, inject } from '@angular/core';
 
 @Injectable()
 export class CKEditorPreviewService {
-  private readonly componentFactoryResolver = inject(ComponentFactoryResolver);
   private readonly appRef = inject(ApplicationRef);
   private readonly injector = inject(Injector);
 
diff --git a/frontend/src/app/shared/components/work-package-graphs/configuration-modal/wp-graph-configuration.modal.ts b/frontend/src/app/shared/components/work-package-graphs/configuration-modal/wp-graph-configuration.modal.ts
index bdbbe1f1c62..ede2e0d4428 100644
--- a/frontend/src/app/shared/components/work-package-graphs/configuration-modal/wp-graph-configuration.modal.ts
+++ b/frontend/src/app/shared/components/work-package-graphs/configuration-modal/wp-graph-configuration.modal.ts
@@ -1,4 +1,4 @@
-import { ApplicationRef, ChangeDetectionStrategy, Component, ComponentFactoryResolver, ElementRef, InjectionToken, Injector, OnDestroy, OnInit, ViewChild, inject } from '@angular/core';
+import { ApplicationRef, ChangeDetectionStrategy, Component, ElementRef, InjectionToken, Injector, OnDestroy, OnInit, ViewChild, inject } from '@angular/core';
 import { OpModalComponent } from 'core-app/shared/components/modal/modal.component';
 import { ConfigurationService } from 'core-app/core/config/configuration.service';
 import {
@@ -26,7 +26,6 @@ export class WpGraphConfigurationModalComponent extends OpModalComponent impleme
   readonly I18n = inject(I18nService);
   readonly injector = inject(Injector);
   readonly appRef = inject(ApplicationRef);
-  readonly componentFactoryResolver = inject(ComponentFactoryResolver);
   readonly loadingIndicator = inject(LoadingIndicatorService);
   readonly notificationService = inject(WorkPackageNotificationService);
   readonly configurationService = inject(ConfigurationService);
@@ -56,7 +55,6 @@ export class WpGraphConfigurationModalComponent extends OpModalComponent impleme
         this.tabPortalHost = new TabPortalOutlet(
           this.graphConfiguration.tabs,
           this.tabContentOutlet.nativeElement,
-          this.componentFactoryResolver,
           this.appRef,
           this.injector,
         );