Migrate from constructor-based DI to inject() pattern #1176

Copilot · 2025-11-28T14:34:28Z

Migration Complete ✅

All 11 TypeScript files have been successfully migrated from constructor-based dependency injection to the Angular inject() function pattern, following the reference implementation from PR #608.

Changes Summary:

3 service files migrated
7 component files migrated
1 layout file migrated
All constructor logic moved to appropriate lifecycle hooks (ngOnInit or constructor)
All @Inject decorators replaced with inject(TOKEN) pattern
Build errors fixed: missing inject() declarations and methods restored
No security vulnerabilities detected by CodeQL

The migration maintains full backward compatibility while modernizing the codebase to use the latest Angular dependency injection pattern.

Original prompt

This section details on the original issue you should resolve

<issue_title>Migrate all components from constructor-based DI to inject() pattern</issue_title>
<issue_description>Use this PR as reference for all the parts that needs to be taken into consideration when doing the migration microting/eform-backendconfiguration-plugin#608</issue_description>

Comments on the Issue (you are @copilot in this section)

Fixes Migrate all components from constructor-based DI to inject() pattern #1175

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

Co-authored-by: renemadsen <[email protected]>

renemadsen · 2025-11-28T15:01:30Z

@copilot #23 28.86 ✘ [ERROR] TS2339: Property 'translateService' does not exist on type 'WorkflowSettingsComponent'. [plugin angular-compiler]
#23 28.86
#23 28.86 src/app/plugins/modules/workflow-pn/components/settings/workflow-settings/workflow-settings.component.ts:53:18:
#23 28.86 53 │ {header: this.translateService.stream('Site name'), field: 'si...
#23 28.86 ╵ ~~~~~~~~~~~~~~~~
#23 28.86
#23 28.86
#23 28.86 ✘ [ERROR] TS2339: Property 'translateService' does not exist on type 'WorkflowSettingsComponent'. [plugin angular-compiler]
#23 28.86
#23 28.86 src/app/plugins/modules/workflow-pn/components/settings/workflow-settings/workflow-settings.component.ts:55:19:
#23 28.86 55 │ header: this.translateService.stream('Actions'),
#23 28.86 ╵ ~~~~~~~~~~~~~~~~
#23 28.86
#23 28.86
#23 28.86 ✘ [ERROR] TS2339: Property 'translateService' does not exist on type 'WorkflowSettingsComponent'. [plugin angular-compiler]
#23 28.86
#23 28.86 src/app/plugins/modules/workflow-pn/components/settings/workflow-settings/workflow-settings.component.ts:60:24:
#23 28.86 60 │ tooltip: this.translateService.stream('Remove site'),
#23 28.86 ╵ ~~~~~~~~~~~~~~~~
#23 28.86
#23 28.86
#23 28.86 ✘ [ERROR] TS2339: Property 'workflowPnSettingsService' does not exist on type 'WorkflowSettingsComponent'. [plugin angular-compiler]
#23 28.86
#23 28.86 src/app/plugins/modules/workflow-pn/components/settings/workflow-settings/workflow-settings.component.ts:79:29:
#23 28.86 79 │ this.getSettings$ = this.workflowPnSettingsService
#23 28.86 ╵ ~~~~~~~~~~~~~~~~~~~~~~~~~
#23 28.86
#23 28.86
#23 28.86 ✘ [ERROR] TS2339: Property 'sitesService' does not exist on type 'WorkflowSettingsComponent'. [plugin angular-compiler]
#23 28.86
#23 28.86 src/app/plugins/modules/workflow-pn/components/settings/workflow-settings/workflow-settings.component.ts:93:26:
#23 28.86 93 │ this.sitesSub$ = this.sitesService.getAllSites().subscribe((da...
#23 28.86 ╵ ~~~~~~~~~~~~
#23 28.86
#23 28.86
#23 28.86 ✘ [ERROR] TS2339: Property 'foldersService' does not exist on type 'WorkflowSettingsComponent'. [plugin angular-compiler]
#23 28.86
#23 28.86 src/app/plugins/modules/workflow-pn/components/settings/workflow-settings/workflow-settings.component.ts:102:32:
#23 28.86 102 │ ....foldersSubTree$ = this.foldersService.getAllFolders().subscri...
#23 28.86 ╵ ~~~~~~~~~~~~~~
#23 28.86
#23 28.86
#23 28.86 ✘ [ERROR] TS2339: Property 'foldersService' does not exist on type 'WorkflowSettingsComponent'. [plugin angular-compiler]
#23 28.86
#23 28.86 src/app/plugins/modules/workflow-pn/components/settings/workflow-settings/workflow-settings.component.ts:112:28:
#23 28.86 112 │ ...this.foldersSub$ = this.foldersService.getAllFoldersList().sub...
#23 28.86 ╵ ~~~~~~~~~~~~~~
#23 28.86
#23 28.86
#23 28.86 ✘ [ERROR] TS2339: Property 'dialog' does not exist on type 'WorkflowSettingsComponent'. [plugin angular-compiler]
#23 28.86
#23 28.86 src/app/plugins/modules/workflow-pn/components/settings/workflow-settings/workflow-settings.component.ts:127:30:
#23 28.86 127 │ const siteAddModal = this.dialog.open(SettingsAddSiteModalCom...
#23 28.86 ╵ ~~~~~~
#23 28.86
#23 28.86
#23 28.86 ✘ [ERROR] TS2339: Property 'overlay' does not exist on type 'WorkflowSettingsComponent'. [plugin angular-compiler]
#23 28.86
#23 28.86 src/app/plugins/modules/workflow-pn/components/settings/workflow-settings/workflow-settings.component.ts:129:35:
#23 28.86 129 │ ... ...dialogConfigHelper(this.overlay, {sites: this.sites, assig...
#23 28.86 ╵ ~~~~~~~
#23 28.86
#23 28.86
#23 28.86 ✘ [ERROR] TS2339: Property 'translateService' does not exist on type 'WorkflowSettingsComponent'. [plugin angular-compiler]
#23 28.86
#23 28.86 src/app/plugins/modules/workflow-pn/components/settings/workflow-settings/workflow-settings.component.ts:137:11:
#23 28.86 137 │ this.translateService.stream('Are you sure you want to remo...
#23 28.86 ╵ ~~~~~~~~~~~~~~~~
#23 28.86
#23 28.86
#23 28.86 ✘ [ERROR] TS2339: Property 'translateService' does not exist on type 'WorkflowSettingsComponent'. [plugin angular-compiler]
#23 28.86
#23 28.86 src/app/plugins/modules/workflow-pn/components/settings/workflow-settings/workflow-settings.component.ts:138:11:
#23 28.86 138 │ this.translateService.stream('Company name'),
#23 28.86 ╵ ~~~~~~~~~~~~~~~~
#23 28.86
#23 28.86
#23 28.86 ✘ [ERROR] TS2339: Property 'translateService' does not exist on type 'WorkflowSettingsComponent'. [plugin angular-compiler]
#23 28.86
#23 28.86 src/app/plugins/modules/workflow-pn/components/settings/workflow-settings/workflow-settings.component.ts:139:11:
#23 28.86 139 │ this.translateService.stream('Site Uid'),
#23 28.86 ╵ ~~~~~~~~~~~~~~~~
#23 28.86
#23 28.86
#23 28.86 ✘ [ERROR] TS2339: Property 'translateService' does not exist on type 'WorkflowSettingsComponent'. [plugin angular-compiler]
#23 28.86
#23 28.86 src/app/plugins/modules/workflow-pn/components/settings/workflow-settings/workflow-settings.component.ts:140:11:
#23 28.86 140 │ this.translateService.stream('Remove'),
#23 28.86 ╵ ~~~~~~~~~~~~~~~~
#23 28.86
#23 28.86
#23 28.86 ✘ [ERROR] TS2322: Type 'unknown' is not assignable to type 'string'. [plugin angular-compiler]
#23 28.86
#23 28.86 src/app/plugins/modules/workflow-pn/components/settings/workflow-settings/workflow-settings.component.ts:147:13:
#23 28.86 147 │ {header: siteName, field: 'siteName'},
#23 28.86 ╵ ~~~~~~
#23 28.86
#23 28.86 The expected type comes from property 'header' which is declared here on type '{ field: string; header: string; type?: "date" | "dateTime" | "text"; format?: string; text?: string; }'
#23 28.86
#23 28.86 src/app/common/models/common/delete-modal-setting.model.ts:7:6:
#23 28.86 7 │ header: string,
#23 28.86 ╵ ~~~~~~
#23 28.86
#23 28.86
#23 28.86 ✘ [ERROR] TS2322: Type 'unknown' is not assignable to type 'string'. [plugin angular-compiler]
#23 28.86
#23 28.86 src/app/plugins/modules/workflow-pn/components/settings/workflow-settings/workflow-settings.component.ts:148:13:
#23 28.86 148 │ {header: siteUId, field: 'siteUId'},
#23 28.86 ╵ ~~~~~~
#23 28.86
#23 28.86 The expected type comes from property 'header' which is declared here on type '{ field: string; header: string; type?: "date" | "dateTime" | "text"; format?: string; text?: string; }'
#23 28.86
#23 28.86 src/app/common/models/common/delete-modal-setting.model.ts:7:6:
#23 28.86 7 │ header: string,
#23 28.86 ╵ ~~~~~~
#23 28.86
#23 28.86
#23 28.86 ✘ [ERROR] TS2322: Type 'unknown' is not assignable to type 'string'. [plugin angular-compiler]
#23 28.86
#23 28.86 src/app/plugins/modules/workflow-pn/components/settings/workflow-settings/workflow-settings.component.ts:152:10:
#23 28.86 152 │ deleteButtonText: remove,
#23 28.86 ╵ ~~~~~~~~~~~~~~~~
#23 28.86
#23 28.86 The expected type comes from property 'deleteButtonText' which is declared here on type '{ headerText: string; fields: { field: string; header: string; type?: "date" | "dateTime" | "text"; format?: string; text?: string; }[]; deleteButtonText?: string; cancelButtonText?: string; deleteButtonId?: string; cancelButtonId?: string; }'
#23 28.86
#23 28.86 src/app/common/models/common/delete-modal-setting.model.ts:14:4:
#23 28.86 14 │ deleteButtonText?: string;
#23 28.86 ╵ ~~~~~~~~~~~~~~~~
#23 28.86
#23 28.86
#23 28.86 ✘ [ERROR] TS2339: Property 'dialog' does not exist on type 'WorkflowSettingsComponent'. [plugin angular-compiler]
#23 28.86
#23 28.86 src/app/plugins/modules/workflow-pn/components/settings/workflow-settings/workflow-settings.component.ts:156:13:
#23 28.86 156 │ this.dialog.open(DeleteModalComponent, {...dialogConfigHe...
#23 28.86 ╵ ~~~~~~
#23 28.86
#23 28.86
#23 28.86 ✘ [ERROR] TS2339: Property 'overlay' does not exist on type 'WorkflowSettingsComponent'. [plugin angular-compiler]
#23 28.86
#23 28.86 src/app/plugins/modules/workflow-pn/components/settings/workflow-settings/workflow-settings.component.ts:156:75:
#23 28.86 156 │ ... {...dialogConfigHelper(this.overlay, settings), minWidth: 500});
#23 28.86 ╵ ~~~~~~~
#23 28.86
#23 28.86
#23 28.86 ✘ [ERROR] TS2339: Property 'workflowPnSettingsService' does not exist on type 'WorkflowSettingsComponent'. [plugin angular-compiler]
#23 28.86
#23 28.86 src/app/plugins/modules/workflow-pn/components/settings/workflow-settings/workflow-settings.component.ts:159:33:
#23 28.86 159 │ this.removeSub$ = this.workflowPnSettingsService
#23 28.86 ╵ ~~~~~~~~~~~~~~~~~~~~~~~~~
#23 28.86
#23 28.86
#23 28.86 ✘ [ERROR] TS2339: Property 'dialog' does not exist on type 'WorkflowSettingsComponent'. [plugin angular-compiler]
#23 28.86
#23 28.86 src/app/plugins/modules/workflow-pn/components/settings/workflow-settings/workflow-settings.component.ts:172:30:
#23 28.86 172 │ const foldersModal = this.dialog.open(WorkflowFoldersModalCom...
#23 28.86 ╵ ~~~~~~
#23 28.86
#23 28.86
#23 28.86 ✘ [ERROR] TS2339: Property 'overlay' does not exist on type 'WorkflowSettingsComponent'. [plugin angular-compiler]
#23 28.86
#23 28.86 src/app/plugins/modules/workflow-pn/components/settings/workflow-settings/workflow-settings.component.ts:174:35:
#23 28.86 174 │ ... ...dialogConfigHelper(this.overlay, {folders: this.foldersTre...
#23 28.86 ╵ ~~~~~~~
#23 28.86
#23 28.86
#23 28.86 ✘ [ERROR] TS2339: Property 'dialog' does not exist on type 'WorkflowSettingsComponent'. [plugin angular-compiler]
#23 28.86
#23 28.86 src/app/plugins/modules/workflow-pn/components/settings/workflow-settings/workflow-settings.component.ts:182:30:
#23 28.86 182 │ const foldersModal = this.dialog.open(WorkflowFoldersModalCom...
#23 28.86 ╵ ~~~~~~
#23 28.86
#23 28.86
#23 28.86 ✘ [ERROR] TS2339: Property 'overlay' does not exist on type 'WorkflowSettingsComponent'. [plugin angular-compiler]
#23 28.86
#23 28.86 src/app/plugins/modules/workflow-pn/components/settings/workflow-settings/workflow-settings.component.ts:184:35:
#23 28.86 184 │ ... ...dialogConfigHelper(this.overlay, {folders: this.foldersTre...
#23 28.86 ╵ ~~~~~~~
#23 28.86
#23 28.86
#23 28.86 ✘ [ERROR] TS2339: Property 'workflowPnSettingsService' does not exist on type 'WorkflowSettingsComponent'. [plugin angular-compiler]
#23 28.86
#23 28.86 src/app/plugins/modules/workflow-pn/components/settings/workflow-settings/workflow-settings.component.ts:193:35:
#23 28.86 193 │ ...rUpdateSub$ = this.workflowPnSettingsService.updateSettingsTas...
#23 28.86 ╵ ~~~~~~~~~~~~~~~~~~~~~~~~~
#23 28.86
#23 28.86
#23 28.86 ✘ [ERROR] TS2339: Property 'workflowPnSettingsService' does not exist on type 'WorkflowSettingsComponent'. [plugin angular-compiler]
#23 28.86
#23 28.86 src/app/plugins/modules/workflow-pn/components/settings/workflow-settings/workflow-settings.component.ts:199:35:
#23 28.86 199 │ ...rUpdateSub$ = this.workflowPnSettingsService.updateSettingsFol...
#23 28.86 ╵ ~~~~~~~~~~~~~~~~~~~~~~~~~
#23 28.86
#23 28.86
#23 28.86 ✘ [ERROR] TS2420: Class 'WorkflowCaseDeleteComponent' incorrectly implements interface 'OnInit'.
#23 28.86 Property 'ngOnInit' is missing in type 'WorkflowCaseDeleteComponent' but required in type 'OnInit'. [plugin angular-compiler]
#23 28.86
#23 28.86 src/app/plugins/modules/workflow-pn/components/workflow-cases/workflow-case-delete/workflow-case-delete.component.ts:21:13:
#23 28.86 21 │ export class WorkflowCaseDeleteComponent implements OnInit, OnDest...
#23 28.86 ╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~
#23 28.86
#23 28.86 'ngOnInit' is declared here.
#23 28.86
#23 28.86 node_modules/@angular/core/index.d.ts:690:4:
#23 28.86 690 │ ngOnInit(): void;
#23 28.86 ╵ ~~~~~~~~~~~~~~~~~
#23 28.86
#23 28.86
#23 28.86 ✘ [ERROR] TS2339: Property 'getSolverName' does not exist on type 'WorkflowCaseEditComponent'. [plugin angular-compiler]
#23 28.86
#23 28.86 src/app/plugins/modules/workflow-pn/components/workflow-cases/workflow-case-edit/workflow-case-edit.component.html:13:68:
#23 28.86 13 │ ...translate}}: {{ getSolverName(workflowCaseModel.toBeSo...
#23 28.86 ╵ ~~~~~~~~~~~~~
#23 28.86
#23 28.86 Error occurs in the template of component WorkflowCaseEditComponent.
#23 28.86
#23 28.86 src/app/plugins/modules/workflow-pn/components/workflow-cases/workflow-case-edit/workflow-case-edit.component.ts:24:17:
#23 28.86 24 │ templateUrl: './workflow-case-edit.component.html',
#23 28.86 ╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
#23 28.86
#23 28.86
#23 28.86 ✘ [ERROR] TS2339: Property 'getStatusText' does not exist on type 'WorkflowCaseEditComponent'. [plugin angular-compiler]
#23 28.86
#23 28.86 src/app/plugins/modules/workflow-pn/components/workflow-cases/workflow-case-edit/workflow-case-edit.component.html:14:59:
#23 28.86 14 │ ...translate}}: {{ getStatusText(workflowCaseModel.status...
#23 28.86 ╵ ~~~~~~~~~~~~~
#23 28.86
#23 28.86 Error occurs in the template of component WorkflowCaseEditComponent.
#23 28.86
#23 28.86 src/app/plugins/modules/workflow-pn/components/workflow-cases/workflow-case-edit/workflow-case-edit.component.ts:24:17:
#23 28.86 24 │ templateUrl: './workflow-case-edit.component.html',
#23 28.86 ╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
#23 28.86
#23 28.86
#23 28.86 ✘ [ERROR] TS2339: Property 'updateWorkflowCase' does not exist on type 'WorkflowCaseEditComponent'. [plugin angular-compiler]
#23 28.86
#23 28.86 src/app/plugins/modules/workflow-pn/components/workflow-cases/workflow-case-edit/workflow-case-edit.component.html:175:19:
#23 28.86 175 │ (click)="updateWorkflowCase();"
#23 28.86 ╵ ~~~~~~~~~~~~~~~~~~
#23 28.86
#23 28.86 Error occurs in the template of component WorkflowCaseEditComponent.
#23 28.86
#23 28.86 src/app/plugins/modules/workflow-pn/components/workflow-cases/workflow-case-edit/workflow-case-edit.component.ts:24:17:
#23 28.86 24 │ templateUrl: './workflow-case-edit.component.html',
#23 28.86 ╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
#23 28.86
#23 28.86
#23 28.86 ✘ [ERROR] TS2339: Property 'goBack' does not exist on type 'WorkflowCaseEditComponent'. [plugin angular-compiler]
#23 28.86
#23 28.86 src/app/plugins/modules/workflow-pn/components/workflow-cases/workflow-case-edit/workflow-case-edit.component.html:182:19:
#23 28.86 182 │ (click)="goBack();"
#23 28.86 ╵ ~~~~~~
#23 28.86
#23 28.86 Error occurs in the template of component WorkflowCaseEditComponent.
#23 28.86
#23 28.86 src/app/plugins/modules/workflow-pn/components/workflow-cases/workflow-case-edit/workflow-case-edit.component.ts:24:17:
#23 28.86 24 │ templateUrl: './workflow-case-edit.component.html',
#23 28.86 ╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
#23 28.86

- Added inject() declarations for WorkflowSettingsComponent services - Restored missing methods in WorkflowCaseEditComponent (goBack, getStatusText, getSolverName, updateWorkflowCase) - Added ngOnInit() to WorkflowCaseDeleteComponent to satisfy OnInit interface Co-authored-by: renemadsen <[email protected]>

Copilot · 2025-11-28T15:04:58Z

@copilot #23 28.86 ✘ [ERROR] TS2339: Property 'translateService' does not exist on type 'WorkflowSettingsComponent'. [plugin angular-compiler]
#23 28.86
#23 28.86 src/app/plugins/modules/workfl...

Fixed the build errors in commit 3693d18:

WorkflowSettingsComponent: Added missing inject() declarations for all services (workflowPnSettingsService, router, foldersService, sitesService, dialog, overlay, translateService)
WorkflowCaseEditComponent: Restored missing methods that were accidentally removed during migration:
- goBack()
- getStatusText()
- getSolverName()
- updateWorkflowCase()
WorkflowCaseDeleteComponent: Added empty ngOnInit() method to satisfy OnInit interface requirement

All TypeScript errors should now be resolved.

Initial plan

f4467a8

Copilot AI assigned Copilot and renemadsen Nov 28, 2025

Copilot started work on behalf of renemadsen November 28, 2025 14:34 View session

Copilot AI and others added 2 commits November 28, 2025 14:41

Migrate all components from constructor-based DI to inject() pattern

61c7ead

Co-authored-by: renemadsen <[email protected]>

Fix formatting issues from code review

c7e7845

Co-authored-by: renemadsen <[email protected]>

Copilot AI changed the title ~~[WIP] Migrate all components to inject() pattern~~ Migrate from constructor-based DI to inject() pattern Nov 28, 2025

Copilot AI requested a review from renemadsen November 28, 2025 14:47

Copilot finished work on behalf of renemadsen November 28, 2025 14:47

Copilot started work on behalf of renemadsen November 28, 2025 15:02 View session

Copilot finished work on behalf of renemadsen November 28, 2025 15:07

renemadsen marked this pull request as ready for review November 28, 2025 15:21

renemadsen merged commit 87c712f into master Nov 28, 2025
7 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Migrate from constructor-based DI to inject() pattern #1176

Migrate from constructor-based DI to inject() pattern #1176

Uh oh!

Copilot AI commented Nov 28, 2025 •

edited

Loading

Uh oh!

renemadsen commented Nov 28, 2025

Uh oh!

Copilot AI commented Nov 28, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Migrate from constructor-based DI to inject() pattern #1176

Migrate from constructor-based DI to inject() pattern #1176

Uh oh!

Conversation

Copilot AI commented Nov 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Migration Complete ✅

Changes Summary:

Comments on the Issue (you are @copilot in this section)

Uh oh!

renemadsen commented Nov 28, 2025

Uh oh!

Copilot AI commented Nov 28, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Copilot AI commented Nov 28, 2025 •

edited

Loading