Skip to content

[OP-19470] Upgrade Angular to v22 - #23588

Merged
myabc merged 20 commits into
devfrom
code-maintenance/angular-22
Jun 10, 2026
Merged

[OP-19470] Upgrade Angular to v22#23588
myabc merged 20 commits into
devfrom
code-maintenance/angular-22

Conversation

@myabc

@myabc myabc commented Jun 7, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Note

This PR is based on #23561. Please review/merge that PR first.

Ticket

https://community.openproject.org/wp/OP-19470
https://community.openproject.org/wp/OP-19369 (also addressed)

What are you trying to accomplish?

Follows on from #21529

Updates Angular to v22:

  • Updates Angular framework, CDK and CLI packages from v21.2.x to v22.0.0
  • Applies Angular v22 deprecation fixes, including the removal of ComponentFactoryResolver and change detection migrations
  • Replaces deprecated Angular HTTP reportProgress usage with explicit upload/download progress options
  • Avoids the Angular NG0912 component ID collision for the GitHub/GitLab actions menu components (OP-19369)
  • Updates TypeScript from 5.9.3 to 6.0.3 to align with Angular v22 requirements
  • Updates ng-select from v21.8 to v23.0 for Angular 22 compatibility
  • Bumps the supported Node engines to ^22.22.3 || ^24.15.0, as required by Angular CLI 22

Related (upstream) PRs

Screenshots

no visible changes

What approach did you choose and why?

Important

This PR also upgrades TypeScript to 6.0, an Angular v22 pre-requisite.

@angular/build is temporarily force-overridden to v22 until @angular-builders/custom-esbuild ships Angular 22 support (see warning above).

@kolkov/ngx-gallery imports Hammer symbols that @angular/platform-browser no longer exports, so a patch-package patch replaces them with inert stubs. Gesture support was already non-functional (the application never imported HammerModule), making this a safe bridge until the unmaintained gallery is replaced.

Follow-up work

Merge checklist

  • Added/updated tests
  • Added/updated documentation
  • Tested major browsers (Chrome, Firefox, Edge, ...)

@myabc
myabc requested a review from Copilot June 7, 2026 17:29
Copilot AI reviewed Jun 7, 2026
View reviewed changes

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR appears to be an Angular/TypeScript maintenance upgrade aimed at moving the frontend to Angular 22 / TypeScript 6, adjusting change detection defaults, and updating related build/runtime wiring (e.g., removal of ComponentFactoryResolver, patching a dependency impacted by Angular platform changes).

Changes:

  • Bump frontend toolchain versions (Angular packages, TypeScript) and Node engine range.
  • Switch many Angular components to ChangeDetectionStrategy.Eager and update various tests to use provideHttpClient(withXhr(), ...).
  • Refactor dynamic component creation away from ComponentFactoryResolver (use createComponent) and add a patch-package patch for @kolkov/ngx-gallery.

Reviewed changes

Copilot reviewed 155 out of 157 changed files in this pull request and generated 4 comments.

Show a summary per file
File Description
package.json Updates supported Node engine range.
modules/gitlab_integration/frontend/module/tab-mrs/tab-mrs.component.ts Sets changeDetection: Eager.
modules/gitlab_integration/frontend/module/tab-issue/tab-issue.component.ts Sets changeDetection: Eager.
modules/gitlab_integration/frontend/module/tab-header-mr/tab-header-mr.component.ts Sets changeDetection: Eager.
modules/gitlab_integration/frontend/module/tab-header-issue/tab-header-issue.component.ts Sets changeDetection: Eager.
modules/gitlab_integration/frontend/module/merge-request/merge-request.component.ts Sets changeDetection: Eager.
modules/gitlab_integration/frontend/module/issue/issue.component.ts Sets changeDetection: Eager.
modules/gitlab_integration/frontend/module/gitlab-tab/gitlab-tab.component.ts Sets changeDetection: Eager.
modules/gitlab_integration/frontend/module/git-actions-menu/git-actions-menu.component.ts Sets changeDetection: Eager.
modules/github_integration/frontend/module/tab-prs/tab-prs.component.spec.ts Updates test stub component change detection.
modules/github_integration/frontend/module/tab-header/tab-header.component.ts Sets changeDetection: Eager.
modules/github_integration/frontend/module/pull-request/pull-request.component.spec.ts Updates test stub component change detection.
modules/github_integration/frontend/module/github-tab/github-tab.component.ts Sets changeDetection: Eager.
modules/github_integration/frontend/module/github-tab/github-tab.component.spec.ts Updates test stub components change detection.
modules/github_integration/frontend/module/git-actions-menu/git-actions-menu.component.ts Sets changeDetection: Eager.
frontend/tsconfig.spec.json Disables strictTemplates for spec compilation.
frontend/tsconfig.app.json Sets rootDir and disables strictTemplates for app compilation.
frontend/src/typings/moment-locales.d.ts Adds wildcard module declaration for Moment locales (TS6 side-effect import typing).
frontend/src/stimulus/controllers/dynamic/admin/openid-connect-providers.controller.ts Adjusts disabled assignment logic for Azure form inputs.
frontend/src/app/spot/components/text-field/text-field.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/spot/components/selector-field/selector-field.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/spot/components/form-field/form-field.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/spot/components/form-field/form-binding.directive.ts Adds explicit constructor on NgControl subclass.
frontend/src/app/shared/components/work-package-graphs/embedded/wp-embedded-graph.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/shared/components/work-package-graphs/configuration-modal/wp-graph-configuration.modal.ts Removes ComponentFactoryResolver usage for tab outlet construction.
frontend/src/app/shared/components/work-package-graphs/configuration-modal/tabs/settings-tab.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/shared/components/work-package-graphs/configuration-modal/tabs/settings-tab-inner.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/shared/components/work-package-graphs/configuration-modal/tabs/filters-tab.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/shared/components/work-package-graphs/configuration-modal/tabs/filters-tab-inner.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/shared/components/toaster/toast.service.spec.ts Adds withXhr() to provideHttpClient(...) in tests.
frontend/src/app/shared/components/storages/storage/storage.component.html Wraps some optional accesses in $safeNavigationMigration(...).
frontend/src/app/shared/components/storages/file-picker-base-modal/file-picker-base-modal.component.spec.ts Updates stub component change detection.
frontend/src/app/shared/components/persistent-toggle/persistent-toggle.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/shared/components/option-list/option-list.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/shared/components/op-context-menu/op-context-menu.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/shared/components/op-context-menu/icon-triggered-context-menu/icon-triggered-context-menu.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/shared/components/modals/share-modal/query-sharing.modal.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/shared/components/modals/share-modal/query-sharing-form.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/shared/components/modals/save-modal/save-query.modal.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/shared/components/modals/editor/macro-wiki-include-page-modal/wiki-include-page-macro.modal.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/shared/components/modals/editor/macro-code-block-modal/code-block-macro.modal.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/shared/components/modals/editor/macro-child-pages-modal/child-pages-macro.modal.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/shared/components/icon/icon.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/shared/components/grids/widgets/wp-table/wp-table-qs.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/shared/components/grids/widgets/wp-table/wp-table-menu.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/shared/components/grids/widgets/wp-graph/wp-graph-menu.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/shared/components/grids/widgets/time-entries/project/time-entries-project.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/shared/components/grids/widgets/time-entries/current-user/time-entries-current-user-menu.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/shared/components/grids/widgets/time-entries/current-user/configuration-modal/configuration.modal.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/shared/components/grids/widgets/menu/widget-menu.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/shared/components/grids/grid/grid.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/shared/components/fields/edit/field-types/work-package-edit-field.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/shared/components/fields/edit/field-types/user-edit-field.component.html Wraps optional access in $safeNavigationMigration(...).
frontend/src/app/shared/components/fields/edit/field-types/text-edit-field/text-edit-field.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/shared/components/fields/edit/field-types/project-status-edit-field.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/shared/components/fields/edit/field-types/plain-formattable-edit-field.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/shared/components/fields/edit/field-types/multi-select-edit-field.component.html Wraps optional access in $safeNavigationMigration(...).
frontend/src/app/shared/components/fields/edit/field-types/integer-edit-field/integer-edit-field.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/shared/components/fields/edit/field-types/float-edit-field.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/shared/components/fields/edit/field-types/days-duration-edit-field.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/shared/components/fields/edit/field-types/combined-date-edit-field.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/shared/components/fields/edit/field-types/boolean-edit-field/boolean-edit-field.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/shared/components/fields/edit/field-controls/edit-field-controls.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/shared/components/fields/edit/editing-portal/edit-form-portal.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/shared/components/fields/edit/edit-form/edit-form.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/shared/components/editor/components/ckeditor/ckeditor-preview.service.ts Removes ComponentFactoryResolver injection.
frontend/src/app/shared/components/editable-toolbar-title/editable-toolbar-title.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/shared/components/datepicker/modal-single-date-picker/modal-single-date-picker.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/shared/components/date/op-date-time.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/shared/components/autocompleter/work-package-autocompleter/wp-autocompleter.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/shared/components/autocompleter/op-autocompleter/services/op-autocompleter.service.spec.ts Adds withXhr() to provideHttpClient(...) in tests.
frontend/src/app/shared/components/autocompleter/op-autocompleter/op-autocompleter.spec.ts Adds withXhr() to provideHttpClient(...) in tests.
frontend/src/app/shared/components/autocompleter/op-autocompleter/op-autocompleter.component.html Wraps optional accesses in $safeNavigationMigration(...).
frontend/src/app/shared/components/autocompleter/members-autocompleter/members-autocompleter.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/features/work-packages/routing/wp-base/wp--base.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/features/work-packages/components/wp-type-status/wp-type-status.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/features/work-packages/components/wp-tabs/services/wp-tabs/wp-tabs.service.spec.ts Adds withXhr() to provideHttpClient(...) in tests.
frontend/src/app/features/work-packages/components/wp-tabs/components/wp-tab-wrapper/wp-tab-wrapper.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/features/work-packages/components/wp-table/timeline/header/wp-timeline-header.directive.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/features/work-packages/components/wp-table/timeline/grid/wp-timeline-grid.directive.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/features/work-packages/components/wp-table/timeline/global-elements/wp-timeline-static-elements.directive.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/features/work-packages/components/wp-table/timeline/global-elements/wp-timeline-relations.directive.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/features/work-packages/components/wp-table/timeline/container/wp-timeline-container.directive.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/features/work-packages/components/wp-table/table-pagination/wp-table-pagination.component.spec.ts Adds withXhr() to provideHttpClient(...) in tests.
frontend/src/app/features/work-packages/components/wp-table/external-configuration/external-relation-query-configuration.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/features/work-packages/components/wp-table/external-configuration/external-query-configuration.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/features/work-packages/components/wp-table/embedded/wp-embedded-table.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/features/work-packages/components/wp-table/embedded/wp-embedded-table-entry.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/features/work-packages/components/wp-table/embedded/embedded-tables-macro.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/features/work-packages/components/wp-table/configuration-modal/wp-table-configuration.modal.ts Removes ComponentFactoryResolver usage and switches to Eager.
frontend/src/app/features/work-packages/components/wp-table/configuration-modal/wp-table-configuration.modal.html Wraps optional access in $safeNavigationMigration(...).
frontend/src/app/features/work-packages/components/wp-table/configuration-modal/wp-table-configuration-relation-selector.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/features/work-packages/components/wp-table/configuration-modal/tabs/timelines-tab.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/features/work-packages/components/wp-table/configuration-modal/tabs/sort-by-tab.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/features/work-packages/components/wp-table/configuration-modal/tabs/display-settings-tab.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/features/work-packages/components/wp-table/configuration-modal/tabs/columns-tab.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/features/work-packages/components/wp-table/configuration-modal/tab-portal-outlet.ts Migrates to createComponent (drops ComponentFactoryResolver).
frontend/src/app/features/work-packages/components/wp-table/config-menu/config-menu.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/features/work-packages/components/wp-subject/wp-subject.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/features/work-packages/components/wp-single-view-tabs/relations-tab/relations-tab.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/features/work-packages/components/wp-single-view-tabs/overview-tab/overview-tab.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/features/work-packages/components/wp-relations/wp-relations-hierarchy/wp-relations-hierarchy.directive.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/features/work-packages/components/wp-relations/wp-relations-group/wp-relations-group.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/features/work-packages/components/wp-relations/wp-relations-create/wp-relations-create.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/features/work-packages/components/wp-relations/wp-relation-row/wp-relation-row.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/features/work-packages/components/wp-relations/embedded/relations/wp-relation-query.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/features/work-packages/components/wp-relations/embedded/inline/add-existing/wp-relation-inline-add-existing.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/features/work-packages/components/wp-relations/embedded/children/wp-children-query.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/features/work-packages/components/wp-inline-create/wp-inline-create.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/features/work-packages/components/wp-form-group/wp-attribute-group.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/features/work-packages/components/wp-edit/wp-edit-field/wp-replacement-label.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/features/work-packages/components/wp-edit-form/work-package-filter-values.spec.ts Adds withXhr() to provideHttpClient(...) in tests.
frontend/src/app/features/work-packages/components/wp-buttons/wp-status-button/wp-status-button.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/features/work-packages/components/wp-breadcrumb/wp-breadcrumb.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/features/work-packages/components/wp-breadcrumb/wp-breadcrumb-parent.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/features/work-packages/components/filters/quick-filter-by-text-input/quick-filter-by-text-input.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/features/work-packages/components/filters/query-filter/query-filter.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/features/work-packages/components/filters/filter-string-value/filter-string-value.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/features/work-packages/components/filters/filter-integer-value/filter-integer-value.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/features/work-packages/components/filters/filter-dates-value/filter-dates-value.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/features/work-packages/components/filters/filter-date-value/filter-date-value.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/features/work-packages/components/filters/filter-date-times-value/filter-date-times-value.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/features/work-packages/components/filters/filter-date-time-value/filter-date-time-value.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/features/team-planner/team-planner/add-work-packages/add-existing-pane.component.html Wraps optional access in $safeNavigationMigration(...).
frontend/src/app/features/overview/dashboard.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/features/my-page/my-page.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/features/hal/services/hal-resource-notification.service.spec.ts Adds withXhr() to provideHttpClient(...) in tests.
frontend/src/app/features/hal/resources/work-package-resource.spec.ts Adds withXhr() to provideHttpClient(...) in tests.
frontend/src/app/features/hal/resources/hal-resource.spec.ts Adds withXhr() to provideHttpClient(...) in tests.
frontend/src/app/features/boards/board/toolbar-menu/boards-menu-button.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/features/boards/board/inline-add/board-inline-add-autocompleter.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/features/boards/board/configuration-modal/tabs/highlighting-tab.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/features/boards/board/configuration-modal/board-configuration.modal.ts Switches to Eager and removes ComponentFactoryResolver from tab outlet wiring.
frontend/src/app/features/boards/board/board-list/board-list-menu.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/features/boards/board/board-filter/board-filter.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/features/boards/board/board-actions/version/version-board-header.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/features/boards/board/board-actions/subtasks/subtasks-board-header.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/features/boards/board/board-actions/subproject/subproject-board-header.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/features/boards/board/board-actions/status/status-board-header.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/features/boards/board/board-actions/assignee/assignee-board-header.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/features/boards/board/add-list-modal/add-list-modal.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/features/bim/ifc_models/toolbar/import-export-bcf/bcf-import-button.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/features/bim/ifc_models/toolbar/import-export-bcf/bcf-export-button.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/core/state/views/views.service.spec.ts Adds withXhr() to provideHttpClient(...) in tests.
frontend/src/app/core/state/principals/principals.service.spec.ts Adds withXhr() to provideHttpClient(...) in tests.
frontend/src/app/core/state/in-app-notifications/in-app-notifications.service.spec.ts Adds withXhr() to provideHttpClient(...) in tests.
frontend/src/app/core/state/capabilities/capabilities.service.spec.ts Adds withXhr() to provideHttpClient(...) in tests.
frontend/src/app/core/state/attachments/attachments.service.spec.ts Adds withXhr() to provideHttpClient(...) in tests.
frontend/src/app/core/routing/base/application-base.component.ts Switches to ChangeDetectionStrategy.Eager.
frontend/src/app/core/main-menu/main-menu-toggle.service.spec.ts Adds withXhr() to provideHttpClient(...) in tests.
frontend/src/app/core/days/weekday.service.spec.ts Adds withXhr() to provideHttpClient(...) in tests.
frontend/src/app/core/datetime/timezone.service.spec.ts Adds withXhr() to provideHttpClient(...) in tests.
frontend/src/app/core/apiv3/endpoints/work_packages/work-package-cache.spec.ts Adds withXhr() to provideHttpClient(...) in tests.
frontend/src/app/app.module.ts Adds withXhr() to app-level provideHttpClient(...).
frontend/patches/@kolkov+ngx-gallery+2.0.1.patch Adds patch to keep @kolkov/ngx-gallery compiling after Hammer removal changes.
frontend/package.json Upgrades Angular/TS versions, adds patch-package + overrides, adds postinstall hook.
Comments suppressed due to low confidence (1)

frontend/src/app/features/work-packages/components/wp-table/configuration-modal/tab-portal-outlet.ts:106

  • TabPortalOutlet#createComponent now instantiates a ComponentPortal, but the portal is never attached anywhere; the only remaining usage is detach() calling current.portal.setAttachedHost(null). Since tab switching now directly appends the component root node into outletElement, the portal allocation (and the setAttachedHost call) looks like leftover code and creates unnecessary coupling to CDK internals.

Comment thread frontend/package.json Outdated
Comment thread frontend/package.json Outdated
Comment thread frontend/package.json Outdated
Comment thread package.json
@myabc myabc changed the title Code maintenance/angular 22 Upgrade Angular to v22 Jun 7, 2026
@myabc myabc changed the title Upgrade Angular to v22 [OP-19470] Upgrade Angular to v22 Jun 7, 2026
@myabc
myabc force-pushed the code-maintenance/angular-22 branch from a4c17b0 to 864d711 Compare June 7, 2026 18:16
@myabc
myabc requested a review from Copilot June 7, 2026 18:31
Copilot AI reviewed Jun 7, 2026
View reviewed changes

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 163 out of 166 changed files in this pull request and generated 5 comments.

Comment thread package.json
Comment thread AGENTS.md Outdated
Comment thread AGENTS.md Outdated
Comment thread frontend/AGENTS.md Outdated
Comment thread ...p/shared/components/storages/file-picker-base-modal/file-picker-base-modal.component.spec.ts Outdated
@myabc
myabc force-pushed the code-maintenance/angular-22 branch from 864d711 to 423c734 Compare June 7, 2026 19:38
myabc added 8 commits June 7, 2026 21:01
@myabc
Bump Node to 22.22.3, npm to ^10.9.8
ead911e 
Bumps supported Node engines to `^22.22.3 || ^24.15.0`.

Updates to Node 22.22.3 for development, production, GitHub workflows
and in documentation.
@myabc
[OP-19470] Update Angular to v22
7020778 
Force updates Angular dependencies:

    ng update @angular/core@22 @angular/cli@22 --force

And performs automated upgrade:

= Adds `ChangeDetectionStrategy.Eager` to all components.
- Adds 'withXhr' to 'provideHttpClient' function calls when the
  'HttpXhrBackend' is used.
- Wraps optional chaining expressions in $safeNavigationMigration().
- Disables the 'nullishCoalescingNotNullable & optionalChainNotNullable
  extended diagnostics.
- Adds 'strictTemplates: false' in tsconfig.json when not set.

https://community.openproject.org/wp/OP-19470
@myabc
Temporarily force @angular/build to ^22.0.0
73e4c9f 
Necessary until a compatible version of @angular-builders/custom-esbuild
is released. See just-jeb/angular-builders#2284
@myabc
Fix frontend tsconfig for TypeScript 6.0
0067b2d 
TypeScript 6.0 requires an explicit `rootDir` when linked-plugin
symlinks push the common source directory outside the project (TS5011),
and type declarations even for side-effect imports such as
`moment/locale/*` (TS2882). Angular 22 also rejects
`extendedDiagnostics` while `strictTemplates` is off (NG4003).
@myabc
Migrate off removed ComponentFactoryResolver
c360862 
Angular 22 removes `ComponentFactoryResolver`. `TabPortalOutlet` now
instantiates tab components with the standalone `createComponent`
function.
@myabc
Patch ngx-gallery for removed Hammer symbols
68ee9cf 
`@angular/platform-browser` no longer exports the Hammer symbols that
`@kolkov/ngx-gallery` imports. Stubs them out via patch-package; the
gallery's gestures were already inert without `HammerModule`.
@myabc
Fix remaining Angular 22 upgrade errors
65fed00 
Angular 22 rejects constructor inheritance from the undecorated
`NgControl` base class (NG2006), and TypeScript 6.0 widens the DOM
`hidden` getter to include string values.
@myabc
Update Angular CDK to v22
7ad404d
@myabc
myabc force-pushed the code-maintenance/angular-22 branch from 423c734 to 7ad404d Compare June 7, 2026 20:09
myabc added 4 commits June 7, 2026 21:18
@myabc
Remove unused @angular-devkit/build-angular
f6ca0c7 
Removes @angular-devkit/build-angular now that Angular's Webpack support
is deprecated.
@myabc
Bump ng-select to ^23.0.0
817baba 
ng-select 23.0.0 introduces support for Angular v22.

See https://github.com/ng-select/ng-select/releases/tag/v23.0.0
@myabc
Add @types/node as explicit devDependency
b50d16d 
`@angular-devkit/build-angular` previously provided `@types/node`
transitively; its removal broke `ng test` in CI, as ts-node compiles
`esbuild/plugins.ts` with the `node` types forced.
@myabc
Allow npm 11 alongside npm 10
1e4d633 
Node 24 ships npm 11, which the previous `^10.9.8` range rejected with
an EBADENGINE warning.
@myabc
myabc requested a review from Copilot June 7, 2026 20:48
Copilot AI reviewed Jun 7, 2026
View reviewed changes

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 167 out of 170 changed files in this pull request and generated 9 comments.

Comment thread frontend/src/app/shared/components/storages/storage/storage.component.html
Comment thread frontend/src/app/shared/components/storages/storage/storage.component.html
Comment thread frontend/src/app/shared/components/fields/edit/field-types/user-edit-field.component.html
Comment thread ...end/src/app/shared/components/fields/edit/field-types/multi-select-edit-field.component.html
Comment thread ...ures/work-packages/components/wp-table/configuration-modal/wp-table-configuration.modal.html
Comment thread ...rc/app/features/team-planner/team-planner/add-work-packages/add-existing-pane.component.html
Comment thread ...end/src/app/shared/components/autocompleter/op-autocompleter/op-autocompleter.component.html
Comment thread ...end/src/app/shared/components/autocompleter/op-autocompleter/op-autocompleter.component.html
Comment thread frontend/src/app/shared/components/editor/components/ckeditor/ckeditor-preview.service.ts Outdated
@myabc myabc added javascript Pull requests that update Javascript code maintenance needs review labels Jun 7, 2026
@myabc myabc added this to the 17.6.x milestone Jun 7, 2026
@myabc
myabc requested a review from oliverguenther June 7, 2026 22:01
@myabc
myabc marked this pull request as ready for review June 7, 2026 22:19
@github-actions

github-actions Bot commented Jun 7, 2026 •
edited
Loading

Copy link
Copy Markdown

Deploying openproject with ⚡ PullPreview

Field Value
Latest commit afe036a
Job deploy
Status ✅ Deploy successful
Preview URL https://pr-23588-angular-22-ip-167-233-55-134.my.opf.run:443

View logs

@myabc

myabc commented Jun 7, 2026

Copy link
Copy Markdown
Contributor Author

@opf/titan this PR patches BIM module dependency ngx-gallery to work with Angular 22. ngx-gallery dependency is obsolete and needs to be replaced ASAP (see linked WP in description). Since I'm not familiar with the module (or its gallery functionality), I'd be grateful if you could do a quick check for any obvious breakage that specs haven't picked up.

@myabc myabc mentioned this pull request Jun 8, 2026
Closed
Base automatically changed from code-maintenance/OP-19461-inject-field to dev June 8, 2026 09:03
This was referenced Jun 8, 2026
Merged
Merged
Closed
oliverguenther
oliverguenther approved these changes Jun 10, 2026
View reviewed changes

@oliverguenther oliverguenther left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code-wise, LGTM. I have not tested the patch for the BCF module

@myabc myabc mentioned this pull request Jun 10, 2026
Closed
@myabc
Bump @angular-builders/custom-esbuild to ^22.0.0
afe036a 
Also removes @angular/build version override added in 73e4c9f.
@myabc
myabc merged commit 8127d71 into dev Jun 10, 2026
21 checks passed
@myabc
myabc deleted the code-maintenance/angular-22 branch June 10, 2026 13:01
@github-actions github-actions Bot locked and limited conversation to collaborators Jun 10, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

Copilot code review Copilot
Copilot review effort
Applies to this pull request for everyone.Learn more about Copilot code review.
Copilot left review comments
@oliverguenther oliverguenther oliverguenther approved these changes

Assignees

No one assigned

Labels

javascript Pull requests that update Javascript code maintenance needs review

Milestone

17.6.x

Development

Successfully merging this pull request may close these issues.

3 participants

@myabc @oliverguenther