references/openproject
1
0
Fork 0
mirror of https://github.com/opf/openproject.git synced 2026-06-14 03:30:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

Migrate off removed ComponentFactoryResolver

Browse Source 
Angular 22 removes `ComponentFactoryResolver`. `TabPortalOutlet` now
instantiates tab components with the standalone `createComponent`
function.
This commit is contained in:
Alexander Brandon Coles
2026-06-07 18:23:22 +01:00
parent 0067b2d533
commit c360862a16
5 changed files with 9 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app/features/boards/board/configuration-modal/board-configuration.modal.ts
+1 -3
View File
@@ -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,
);
frontend/src/app/features/work-packages/components/wp-table/configuration-modal/tab-portal-outlet.ts
+5 -4
View File
@@ -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
frontend/src/app/features/work-packages/components/wp-table/configuration-modal/wp-table-configuration.modal.ts
+1 -3
View File
@@ -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,
);
frontend/src/app/shared/components/editor/components/ckeditor/ckeditor-preview.service.ts
+1 -2
View File
@@ -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);
frontend/src/app/shared/components/work-package-graphs/configuration-modal/wp-graph-configuration.modal.ts
+1 -3
View File
@@ -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,
);