Skip to content

Fix Angular 22 change detection and dialog visibility bugs - #36907

Merged
nicobytes merged 5 commits into
mainfrom
nicobytes/35930-angular-22-bugs
Aug 6, 2026
Merged

Fix Angular 22 change detection and dialog visibility bugs#36907
nicobytes merged 5 commits into
mainfrom
nicobytes/35930-angular-22-bugs

Conversation

@nicobytes

@nicobytes nicobytes commented Aug 5, 2026 •
edited
Loading

Copy link
Copy Markdown
Member

This pull request introduces several improvements focused on performance and event handling reliability across multiple Angular components in the codebase. The most significant change is the consistent application of ChangeDetectionStrategy.Eager to various components, which can improve UI responsiveness and predictability. Additionally, the event handler service is refactored to ensure that custom events are never dropped, even if feature flags are still loading.

Change Detection Strategy Enhancements:

Event Handler Reliability and Testing:

  • Refactored DotCustomEventHandlerService to register event handlers synchronously, ensuring iframe events (such as push-publish) are never dropped while waiting for feature-flag resolution. Handlers for edit-contentlet and create-contentlet are now updated dynamically after feature-flag resolution. [1] [2]
  • Added a unit test to verify that the push-publish dialog opens even if the feature-flag observable has not resolved, increasing test coverage and reliability.
  • Updated test imports to include NEVER from rxjs for improved test scenarios.

Fix #35930

@nicobytes
fix(dialogs): enhance dialog visibility handling and improve componen…
719e660 
…t responsiveness

- Updated dialog components to use `onVisibleChange` method for better synchronization of visibility state with PrimeNG's dialog.
- Refactored dialog templates to ensure proper binding of visibility properties and added `appendTo="body"` for improved rendering.
- Enhanced `ChangeDetectorRef` usage in various components to ensure UI updates occur correctly after asynchronous operations.
- Added tests to verify dialog behavior, including visibility changes and responsiveness to user interactions.

These changes improve the user experience by ensuring dialogs behave consistently and responsively across the application.
@nicobytes
Add ChangeDetectionStrategy.Eager to standalone Angular components
481665e 
Aligns existing components with Angular's new default change detection
strategy so they behave the same as before the Angular 22 upgrade,
where the previous implicit default changes.
Copilot AI lite review requested due to automatic review settings August 5, 2026 22:01
@claude

claude Bot commented Aug 5, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Claude finished @nicobytes's task in 7m 15s —— View job

Code Review

I focused on the behavioral changes (the mechanical ChangeDetectionStrategy.Eager additions across 200+ files are consistent and I verified Eager is used uniformly). Reviewed: the event-handler refactor, the four dialog [visible]/visibleChange conversions, and the thumbnail-field CD changes.

New Issues

  • 🟡 Medium: dot-templates/.../dot-template-thumbnail-field.component.ts:90 & :137 — this.cdr.detectChanges() is now called inside finalize(...). Unlike the other dialogs (which detect changes inside a takeUntil(destroy$) subscription), these two upload/load subscriptions have no takeUntil / unsubscribe on destroy. finalize also runs when the observable is torn down, so if the user navigates away or the parent DynamicDialog closes while the upload is still in flight, detectChanges() executes against an already-destroyed view and throws NG0911: View has already been destroyed. The old code did not call detectChanges() here, so this is newly introduced. Assumption: the HTTP call can outlive the component (no cancellation is wired up). What to verify: complete an upload/asset-load after closing the template dialog and confirm no console error. Consider guarding with a destroyed flag or switching to markForCheck().

Resolved

  • ✅ dot-custom-event-handler.service.ts — Copilot's comment about the stale // THIS NEEDS TESTING marker no longer applies: that comment lived in the old if (!this.handlers) block, which this PR deletes entirely. Nothing to change.
  • ✅ Dialog visibleChange handling — the switch from [(visible)] + (visibleChange)="close()" to one-way [visible] + onVisibleChange($event) (only tearing down when !visible) correctly fixes the prior double-fire on open. closable/closeOnEscape also satisfy the repo dialog convention.

Notes (non-blocking)

  • Event-handler refactor is sound: registering handlers synchronously in the constructor and only swapping edit-contentlet/create-contentlet after the feature flag resolves closes the real race — previously this.handlers was undefined until the flag arrived, so handle()'s ?. silently dropped early iframe events (push-publish, etc.). The added NEVER test correctly locks this in.
  • Test gap (minor): the new test covers push-publish before flag resolution, but there's no assertion that edit-contentlet/create-contentlet fall back to the legacy handler when the flag hasn't resolved and then upgrade after it emits true. Worth a follow-up test since that dynamic swap is the subtler half of the change.

Overall this is a clean, low-risk PR — the one item worth addressing before merge is the detectChanges()-in-finalize view-destroyed risk in the thumbnail field.

@github-actions github-actions Bot mentioned this pull request Aug 5, 2026
Closed
13 tasks
@github-actions github-actions Bot added Area : Frontend PR changes Angular/TypeScript frontend code Area : SDK PR changes SDK libraries labels Aug 5, 2026
Copilot AI reviewed Aug 5, 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 addresses Angular 22 upgrade regressions by standardizing change-detection behavior across core-web components, fixing PrimeNG dialog visibility handling, and ensuring iframe “ng-event” custom events are not lost while feature-flag resolution is pending.

Changes:

  • Apply ChangeDetectionStrategy.Eager broadly across Angular components (apps + libs) to restore expected view updates after the Angular 22 upgrade.
  • Fix multiple PrimeNG dialogs by switching from [(visible)] to one-way [visible] with explicit (visibleChange) handling, plus appendTo="body" and close behavior tweaks.
  • Rework DotCustomEventHandlerService to register handlers synchronously (and update/extend related unit tests).

Reviewed changes

Copilot reviewed 215 out of 215 changed files in this pull request and generated 1 comment.

Show a summary per file
File Description
core-web/libs/utils-testing/src/lib/test-setup-helpers.ts Add ChangeDetectionStrategy.Eager to common test mocks.
core-web/libs/utils-testing/src/lib/split-button.mock.ts Add ChangeDetectionStrategy.Eager to split-button mock component.
core-web/libs/utils-testing/src/lib/dot-not-licensed.component.mock.ts Add ChangeDetectionStrategy.Eager to not-licensed mock.
core-web/libs/ui/src/lib/dot-tab-buttons/dot-tab-buttons.component.ts Add ChangeDetectionStrategy.Eager to tab buttons.
core-web/libs/ui/src/lib/dot-spinner/dot-spinner.component.ts Add ChangeDetectionStrategy.Eager to spinner.
core-web/libs/ui/src/lib/dot-icon/dot-icon.component.ts Add ChangeDetectionStrategy.Eager to icon component.
core-web/libs/ui/src/lib/components/dot-severity-icon/dot-severity-icon.component.ts Add ChangeDetectionStrategy.Eager to severity icon.
core-web/libs/ui/src/lib/components/dot-pages-favorite-page-empty-skeleton/dot-pages-favorite-page-empty-skeleton.component.ts Add ChangeDetectionStrategy.Eager to skeleton component.
core-web/libs/ui/src/lib/components/dot-menu/dot-menu.component.ts Add ChangeDetectionStrategy.Eager to menu component.
core-web/libs/ui/src/lib/components/dot-link/dot-link.component.ts Add ChangeDetectionStrategy.Eager to link component.
core-web/libs/ui/src/lib/components/dot-key-value-ng/dot-key-value-table-header-row/dot-key-value-table-header-row.component.ts Add ChangeDetectionStrategy.Eager to key/value header row.
core-web/libs/ui/src/lib/components/dot-form-dialog/dot-form-dialog.component.ts Add ChangeDetectionStrategy.Eager to form dialog.
core-web/libs/ui/src/lib/components/dot-api-link/dot-api-link.component.ts Add ChangeDetectionStrategy.Eager to API link component.
core-web/libs/ui/src/lib/components/dot-ai-image-prompt/components/ai-image-prompt-gallery/ai-image-prompt-gallery.component.ts Add ChangeDetectionStrategy.Eager to AI prompt gallery.
core-web/libs/ui/src/lib/components/dot-action-menu-button/dot-action-menu-button.component.ts Add ChangeDetectionStrategy.Eager to action menu button.
core-web/libs/ui/src/lib/components/add-to-bundle/dot-add-to-bundle.component.ts Add ChangeDetectionStrategy.Eager to add-to-bundle.
core-web/libs/template-builder/src/lib/components/template-builder/components/template-builder-sidebar/template-builder-sidebar.component.ts Add ChangeDetectionStrategy.Eager to template builder sidebar.
core-web/libs/template-builder/src/lib/components/template-builder/components/dot-layout-properties/dot-layout-property-sidebar/dot-layout-property-sidebar.component.ts Add ChangeDetectionStrategy.Eager to layout property sidebar.
core-web/libs/template-builder/src/lib/components/template-builder/components/dot-layout-properties/dot-layout-properties.component.ts Add ChangeDetectionStrategy.Eager to layout properties panel.
core-web/libs/template-builder/src/lib/components/template-builder/components/dot-layout-properties/dot-layout-properties-item/dot-layout-properties-item.component.ts Add ChangeDetectionStrategy.Eager to layout properties item.
core-web/libs/sdk/angular/src/lib/components/dotcms-layout-body/components/container/components/empty-container/empty-container.component.ts Add ChangeDetectionStrategy.Eager to empty container.
core-web/libs/sdk/angular/src/lib/components/dotcms-layout-body/components/container/components/container-not-found/container-not-found.component.ts Add ChangeDetectionStrategy.Eager to container-not-found.
core-web/libs/sdk/angular/src/lib/components/dotcms-editable-text/dotcms-editable-text.component.ts Add ChangeDetectionStrategy.Eager to editable text.
core-web/libs/sdk/angular/src/lib/components/dotcms-block-editor-renderer/item/dotcms-block-editor-item.component.ts Add ChangeDetectionStrategy.Eager to block editor item.
core-web/libs/sdk/angular/src/lib/components/dotcms-block-editor-renderer/dotcms-block-editor-renderer.component.ts Add ChangeDetectionStrategy.Eager to block editor renderer.
core-web/libs/sdk/angular/src/lib/components/dotcms-block-editor-renderer/blocks/unknown.component.ts Add ChangeDetectionStrategy.Eager to unknown block component.
core-web/libs/sdk/angular/src/lib/components/dotcms-block-editor-renderer/blocks/table.component.ts Add ChangeDetectionStrategy.Eager to table block component.
core-web/libs/sdk/angular/src/lib/components/dotcms-block-editor-renderer/blocks/grid-block.component.ts Add ChangeDetectionStrategy.Eager to grid block component.
core-web/libs/sdk/angular/src/lib/components/dotcms-block-editor-renderer/blocks/dot-contentlet.component.ts Add ChangeDetectionStrategy.Eager to “no component provided” view.
core-web/libs/portlets/edit-ema/ui/src/lib/palette/components/dot-favorite-selector/dot-favorite-selector.component.ts Add ChangeDetectionStrategy.Eager to favorite selector.
core-web/libs/portlets/edit-ema/ui/src/lib/dot-favorite-page/dot-favorite-page.component.ts Add ChangeDetectionStrategy.Eager to favorite page.
core-web/libs/portlets/edit-ema/ui/src/lib/dot-content-compare/dot-content-compare.component.ts Add ChangeDetectionStrategy.Eager to content compare root.
core-web/libs/portlets/edit-ema/ui/src/lib/dot-content-compare/components/fields/dot-content-compare-preview-field/dot-content-compare-preview-field.component.ts Add ChangeDetectionStrategy.Eager to preview field.
core-web/libs/portlets/edit-ema/ui/src/lib/dot-content-compare/components/dot-content-compare-table/dot-content-compare-table.component.ts Add ChangeDetectionStrategy.Eager to compare table.
core-web/libs/portlets/edit-ema/ui/src/lib/dot-content-compare/components/dot-content-compare-dialog/dot-content-compare-dialog.component.ts Add eager CD and explicit visibleChange handling + forced CD on open.
core-web/libs/portlets/edit-ema/ui/src/lib/dot-content-compare/components/dot-content-compare-dialog/dot-content-compare-dialog.component.html Switch to [visible] + (visibleChange), add appendTo="body" and close options.
core-web/libs/portlets/edit-ema/ui/src/lib/dot-content-compare/components/dot-content-compare-block-editor/dot-content-compare-block-editor.component.ts Add ChangeDetectionStrategy.Eager to compare block editor.
core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/components/edit-ema-persona-selector/edit-ema-persona-selector.component.ts Add ChangeDetectionStrategy.Eager to persona selector.
core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/components/dot-uve-workflow-actions/dot-uve-workflow-actions.component.ts Add ChangeDetectionStrategy.Eager to workflow actions.
core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-palette/components/dot-uve-style-editor-form/components/uve-style-editor-field-radio/uve-style-editor-field-radio.component.ts Add ChangeDetectionStrategy.Eager to style editor radio field.
core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-palette/components/dot-uve-style-editor-form/components/uve-style-editor-field-input/uve-style-editor-field-input.component.ts Add ChangeDetectionStrategy.Eager to style editor input field.
core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-palette/components/dot-uve-style-editor-form/components/uve-style-editor-field-dropdown/uve-style-editor-field-dropdown.component.ts Add ChangeDetectionStrategy.Eager to style editor dropdown field.
core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-palette/components/dot-uve-style-editor-form/components/uve-style-editor-field-checkbox-group/uve-style-editor-field-checkbox-group.component.ts Add ChangeDetectionStrategy.Eager to style editor checkbox-group field.
core-web/libs/portlets/edit-ema/portlet/src/lib/components/dot-block-editor-sidebar/dot-block-editor-sidebar.component.ts Add ChangeDetectionStrategy.Eager to block editor sidebar.
core-web/libs/portlets/dot-locales/portlet/src/lib/dot-locales-shell/dot-locales-shell.component.ts Add ChangeDetectionStrategy.Eager to locales shell.
core-web/libs/portlets/dot-content-drive/portlet/src/lib/components/dialogs/dot-content-drive-dialog-folder/dot-content-drive-dialog-folder.component.ts Add ChangeDetectionStrategy.Eager to folder dialog component.
core-web/libs/portlets/dot-analytics/portlet/src/lib/dot-analytics-search/dot-analytics-search.component.ts Add ChangeDetectionStrategy.Eager to analytics search.
core-web/libs/portlets/dot-analytics/portlet/src/lib/dot-analytics-error/dot-analytics-error.component.ts Add ChangeDetectionStrategy.Eager to analytics error page.
core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/pagination/pagination.component.ts Add ChangeDetectionStrategy.Eager to pagination component.
core-web/libs/dot-rules/src/lib/features/rule/dot-rule.component.ts Switch rule component change detection to eager.
core-web/libs/dot-rules/src/lib/features/rule-engine/dot-rule-engine.component.ts Add ChangeDetectionStrategy.Eager to rule engine.
core-web/libs/dot-rules/src/lib/features/rule-engine/container/dot-rule-engine-container.component.ts Add ChangeDetectionStrategy.Eager to rule engine container.
core-web/libs/dot-rules/src/lib/features/conditions/rule-condition/dot-rule-condition.component.ts Add ChangeDetectionStrategy.Eager to rule condition.
core-web/libs/dot-rules/src/lib/features/conditions/geolocation/dialog/dot-area-picker-dialog.component.ts Switch area picker dialog change detection to eager.
core-web/libs/dot-rules/src/lib/features/conditions/condition-group/dot-condition-group.component.ts Add ChangeDetectionStrategy.Eager to condition group.
core-web/libs/dot-rules/src/lib/features/actions/dot-rule-action.component.ts Add ChangeDetectionStrategy.Eager to rule action.
core-web/libs/dot-rules/src/lib/entry/dot-rules.component.ts Add ChangeDetectionStrategy.Eager to dot-rules entry.
core-web/libs/block-editor/src/lib/shared/components/suggestions/suggestions.component.ts Add ChangeDetectionStrategy.Eager to suggestions component.
core-web/libs/block-editor/src/lib/shared/components/suggestion-loading-list/suggestion-loading-list.component.ts Add ChangeDetectionStrategy.Eager to suggestion loading list.
core-web/libs/block-editor/src/lib/shared/components/suggestion-list/suggestion-list.component.ts Add ChangeDetectionStrategy.Eager to suggestion list.
core-web/libs/block-editor/src/lib/shared/components/suggestion-list/components/suggestions-list-item/suggestions-list-item.component.ts Add ChangeDetectionStrategy.Eager to suggestion list item.
core-web/libs/block-editor/src/lib/shared/components/empty-message/empty-message.component.ts Add ChangeDetectionStrategy.Eager to empty message component.
core-web/libs/block-editor/src/lib/NodeViewRenderer.ts Add eager CD to Angular node view wrapper component.
core-web/libs/block-editor/src/lib/nodes/contentlet-block/contentlet-block.component.ts Add ChangeDetectionStrategy.Eager to contentlet block node.
core-web/libs/block-editor/src/lib/extensions/floating-button/floating-button.component.ts Add ChangeDetectionStrategy.Eager to floating button.
core-web/libs/block-editor/src/lib/extensions/bubble-form/bubble-form.component.ts Add ChangeDetectionStrategy.Eager to bubble form.
core-web/libs/block-editor/src/lib/extensions/ai-content-prompt/ai-content-prompt.component.ts Add ChangeDetectionStrategy.Eager to AI content prompt.
core-web/libs/block-editor/src/lib/elements/dot-context-menu/dot-context-menu.component.ts Add ChangeDetectionStrategy.Eager to editor context menu.
core-web/libs/block-editor/src/lib/elements/dot-bubble-menu/components/dot-link-editor-popover/dot-link-editor-popover.component.ts Add ChangeDetectionStrategy.Eager to link editor popover.
core-web/libs/block-editor/src/lib/elements/dot-bubble-menu/components/dot-image-editor-popover/dot-image-editor-popover.component.ts Add ChangeDetectionStrategy.Eager to image editor popover.
core-web/libs/block-editor/src/lib/components/dot-editor-count-bar/dot-editor-count-bar.component.ts Add ChangeDetectionStrategy.Eager to editor count bar.
core-web/libs/block-editor/src/lib/components/dot-block-editor/dot-block-editor.component.ts Add ChangeDetectionStrategy.Eager to block editor root component.
core-web/apps/dotcms-ui/src/stories/primeng/overlay/DynamicDialogProducts.component.ts Add eager CD to PrimeNG story component.
core-web/apps/dotcms-ui/src/stories/primeng/overlay/DynamicDialogButton.component.ts Add eager CD to PrimeNG story component.
core-web/apps/dotcms-ui/src/stories/primeng/overlay/ConfirmDialog.component.ts Add eager CD to PrimeNG story component.
core-web/apps/dotcms-ui/src/stories/primeng/misc/Ripple.component.ts Add eager CD to PrimeNG story component.
core-web/apps/dotcms-ui/src/stories/primeng/misc/Defer.component.ts Add eager CD to PrimeNG story component.
core-web/apps/dotcms-ui/src/stories/primeng/messages/Toast.component.ts Add eager CD to PrimeNG story component.
core-web/apps/dotcms-ui/src/app/view/components/not-license/not-license.component.ts Add ChangeDetectionStrategy.Eager to not-licensed page wrapper.
core-web/apps/dotcms-ui/src/app/view/components/main-legacy/main-legacy.component.ts Add eager CD to legacy main shell.
core-web/apps/dotcms-ui/src/app/view/components/main-core-legacy/main-core-legacy-component.ts Add eager CD to core legacy main component.
core-web/apps/dotcms-ui/src/app/view/components/login/reset-password-component/reset-password.component.ts Add eager CD to reset password component.
core-web/apps/dotcms-ui/src/app/view/components/login/main/dot-login-page.component.ts Add eager CD to login page component.
core-web/apps/dotcms-ui/src/app/view/components/login/forgot-password-component/forgot-password.component.ts Add eager CD to forgot password component.
core-web/apps/dotcms-ui/src/app/view/components/login/dot-logout-container-component/dot-log-out-container.ts Add eager CD to logout container.
core-web/apps/dotcms-ui/src/app/view/components/login/dot-login-component/dot-login.component.ts Add eager CD to login component.
core-web/apps/dotcms-ui/src/app/view/components/dot-workflow-task-detail/dot-workflow-task-detail.component.ts Add eager CD to workflow task detail component.
core-web/apps/dotcms-ui/src/app/view/components/dot-toolbar/dot-toolbar.component.ts Add eager CD to toolbar component.
core-web/apps/dotcms-ui/src/app/view/components/dot-toolbar/components/dot-toolbar-notifications/components/dot-notification-item/dot-notification-item.component.ts Add eager CD to notification item component.
core-web/apps/dotcms-ui/src/app/view/components/dot-toolbar/components/dot-toolbar-announcements/dot-toolbar-announcements.component.ts Add eager CD to announcements component.
core-web/apps/dotcms-ui/src/app/view/components/dot-relationship-tree/dot-relationship-tree.component.ts Add eager CD to relationship tree component.
core-web/apps/dotcms-ui/src/app/view/components/dot-portlet-base/dot-portlet-base.component.ts Add eager CD to portlet base component.
core-web/apps/dotcms-ui/src/app/view/components/dot-portlet-base/components/dot-portlet-box/dot-portlet-box.component.ts Add eager CD to portlet box component.
core-web/apps/dotcms-ui/src/app/view/components/dot-persona-selector/dot-persona-selector.component.ts Add eager CD to persona selector.
core-web/apps/dotcms-ui/src/app/view/components/dot-persona-selector-option/dot-persona-selector-option.component.ts Add eager CD to persona selector option.
core-web/apps/dotcms-ui/src/app/view/components/dot-persona-selected-item/dot-persona-selected-item.component.ts Add eager CD to persona selected item.
core-web/apps/dotcms-ui/src/app/view/components/dot-navigation/dot-navigation.component.ts Add eager CD to navigation component.
core-web/apps/dotcms-ui/src/app/view/components/dot-navigation/components/dot-sub-nav/dot-sub-nav.component.ts Add eager CD to sub-nav component.
core-web/apps/dotcms-ui/src/app/view/components/dot-navigation/components/dot-nav-item/dot-nav-item.component.ts Add eager CD to nav item component.
core-web/apps/dotcms-ui/src/app/view/components/dot-navigation/components/dot-nav-icon/dot-nav-icon.component.ts Add eager CD to nav icon component.
core-web/apps/dotcms-ui/src/app/view/components/dot-navigation/components/dot-nav-header/dot-nav-header.component.ts Add eager CD to nav header component.
core-web/apps/dotcms-ui/src/app/view/components/dot-message-display/dot-message-display.component.ts Add eager CD to message display component.
core-web/apps/dotcms-ui/src/app/view/components/dot-listing-data-table/dot-listing-data-table.component.ts Add eager CD to listing data table.
core-web/apps/dotcms-ui/src/app/view/components/dot-link/dot-link.component.ts Add eager CD to app-level dot-link component.
core-web/apps/dotcms-ui/src/app/view/components/dot-large-message-display/dot-large-message-display.component.ts Add eager CD to large message display.
core-web/apps/dotcms-ui/src/app/view/components/dot-iframe-dialog/dot-iframe-dialog.component.ts Add eager CD to iframe dialog.
core-web/apps/dotcms-ui/src/app/view/components/dot-field-helper/dot-field-helper.component.ts Add eager CD to field helper.
core-web/apps/dotcms-ui/src/app/view/components/dot-copy-link/dot-copy-link.component.ts Add eager CD to copy link component.
core-web/apps/dotcms-ui/src/app/view/components/dot-contentlet-editor/components/dot-reorder-menu/dot-reorder-menu.component.ts Add eager CD to reorder menu.
core-web/apps/dotcms-ui/src/app/view/components/dot-contentlet-editor/components/dot-edit-contentlet/dot-edit-contentlet.component.ts Add eager CD to edit contentlet component.
core-web/apps/dotcms-ui/src/app/view/components/dot-contentlet-editor/components/dot-create-contentlet/dot-create-contentlet.component.ts Add eager CD to create contentlet component.
core-web/apps/dotcms-ui/src/app/view/components/dot-contentlet-editor/components/dot-contentlet-wrapper/dot-contentlet-wrapper.component.ts Add eager CD to contentlet wrapper.
core-web/apps/dotcms-ui/src/app/view/components/dot-contentlet-editor/components/dot-add-contentlet/dot-add-contentlet.component.ts Add eager CD to add contentlet component.
core-web/apps/dotcms-ui/src/app/view/components/dot-content-type-selector/dot-content-type-selector.component.ts Add eager CD to content type selector.
core-web/apps/dotcms-ui/src/app/view/components/dot-container-selector/dot-container-selector.component.ts Add eager CD to container selector.
core-web/apps/dotcms-ui/src/app/view/components/dot-base-type-selector/dot-base-type-selector.component.ts Add eager CD to base type selector.
core-web/apps/dotcms-ui/src/app/view/components/dot-add-persona-dialog/dot-create-persona-form/dot-create-persona-form.component.ts Add eager CD to create persona form.
core-web/apps/dotcms-ui/src/app/view/components/dot-add-persona-dialog/dot-add-persona-dialog.component.ts Add eager CD to add persona dialog.
core-web/apps/dotcms-ui/src/app/view/components/_common/searchable-dropdown/component/searchable-dropdown.component.ts Add eager CD to searchable dropdown.
core-web/apps/dotcms-ui/src/app/view/components/_common/iframe/iframe-porlet-legacy/iframe-porlet-legacy.component.ts Add eager CD to legacy iframe portlet.
core-web/apps/dotcms-ui/src/app/view/components/_common/iframe/iframe-component/iframe.component.ts Add eager CD to iframe component.
core-web/apps/dotcms-ui/src/app/view/components/_common/iframe/dot-loading-indicator/dot-loading-indicator.component.ts Add eager CD to iframe loading indicator.
core-web/apps/dotcms-ui/src/app/view/components/_common/forms/dot-push-publish-form/dot-push-publish-form.component.ts Add eager CD to push publish form.
core-web/apps/dotcms-ui/src/app/view/components/_common/forms/dot-comment-and-assign-form/dot-comment-and-assign-form.component.ts Add eager CD to comment/assign form.
core-web/apps/dotcms-ui/src/app/view/components/_common/dot-workflows-selector-field/dot-workflows-selector-field.component.ts Add eager CD to workflows selector field.
core-web/apps/dotcms-ui/src/app/view/components/_common/dot-workflows-actions-selector-field/dot-workflows-actions-selector-field.component.ts Add eager CD to workflow actions selector field.
core-web/apps/dotcms-ui/src/app/view/components/_common/dot-wizard/dot-wizard.component.ts Add eager CD to wizard component.
core-web/apps/dotcms-ui/src/app/view/components/_common/dot-push-publish-env-selector/dot-push-publish-env-selector.component.ts Add eager CD to env selector.
core-web/apps/dotcms-ui/src/app/view/components/_common/dot-push-publish-dialog/dot-push-publish-dialog.component.ts Add eager CD, explicit visibleChange handling, and forced CD on open.
core-web/apps/dotcms-ui/src/app/view/components/_common/dot-push-publish-dialog/dot-push-publish-dialog.component.spec.ts Update tests for new dialog visibility + CD behavior.
core-web/apps/dotcms-ui/src/app/view/components/_common/dot-push-publish-dialog/dot-push-publish-dialog.component.html Switch to [visible] + (visibleChange), add appendTo="body" and close options.
core-web/apps/dotcms-ui/src/app/view/components/_common/dot-page-selector/dot-page-selector.component.ts Add eager CD to page selector.
core-web/apps/dotcms-ui/src/app/view/components/_common/dot-overlay-mask/dot-overlay-mask.component.ts Add eager CD to overlay mask.
core-web/apps/dotcms-ui/src/app/view/components/_common/dot-md-icon-selector/dot-md-icon-selector.component.ts Add eager CD to MD icon selector.
core-web/apps/dotcms-ui/src/app/view/components/_common/dot-inline-edit/dot-inline-edit.component.ts Add eager CD to inline edit.
core-web/apps/dotcms-ui/src/app/view/components/_common/dot-global-message/dot-global-message.component.ts Add eager CD to global message.
core-web/apps/dotcms-ui/src/app/view/components/_common/dot-generate-secure-password/dot-generate-secure-password.component.ts Add eager CD, explicit visibleChange handling, and forced CD on open.
core-web/apps/dotcms-ui/src/app/view/components/_common/dot-generate-secure-password/dot-generate-secure-password.component.html Switch to [visible] + (visibleChange), add appendTo="body" and close options.
core-web/apps/dotcms-ui/src/app/view/components/_common/dot-empty-state/dot-empty-state.component.ts Add eager CD to empty state component.
core-web/apps/dotcms-ui/src/app/view/components/_common/dot-download-bundle-dialog/dot-download-bundle-dialog.component.ts Add eager CD, explicit visibleChange handling, and forced CD on open.
core-web/apps/dotcms-ui/src/app/view/components/_common/dot-download-bundle-dialog/dot-download-bundle-dialog.component.html Switch to [visible] + (visibleChange), add appendTo="body" and close options.
core-web/apps/dotcms-ui/src/app/view/components/_common/dot-bulk-information/dot-bulk-information.component.ts Add eager CD to bulk info component.
core-web/apps/dotcms-ui/src/app/view/components/_common/dot-autocomplete-tags/dot-autocomplete-tags.component.ts Add eager CD to autocomplete tags.
core-web/apps/dotcms-ui/src/app/view/components/_common/dot-alert-confirm/dot-alert-confirm.ts Add eager CD to alert confirm component.
core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-listing/dot-content-types.component.ts Add eager CD to content types listing.
core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-listing/components/dot-add-to-menu/dot-add-to-menu.component.ts Add eager CD to add-to-menu dialog.
core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/dot-content-types-edit.component.ts Add eager CD to content type editor wrapper.
core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/layout/content-types-layout.component.ts Add eager CD to content types layout.
core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/form/content-types-form.component.ts Add eager CD to content types form.
core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/fields/dot-edit-field-dialog/dot-edit-field-dialog.component.ts Add eager CD to edit-field dialog.
core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/fields/content-types-fields-list/content-types-fields-list.component.ts Add eager CD to fields list.
core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/fields/content-type-fields-tab/content-type-fields-tab.component.ts Add eager CD to fields tab.
core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/fields/content-type-fields-row/content-type-fields-row.component.ts Add eager CD to fields row.
core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/fields/content-type-fields-properties-form/field-properties/values-property/values-property.component.ts Add eager CD to values property.
core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/fields/content-type-fields-properties-form/field-properties/render-mode-property/render-mode-property.component.ts Add eager CD to render-mode property.
core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/fields/content-type-fields-properties-form/field-properties/regex-check-property/regex-check-property.component.ts Add eager CD to regex-check property.
core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/fields/content-type-fields-properties-form/field-properties/name-property/name-property.component.ts Add eager CD to name property.
core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/fields/content-type-fields-properties-form/field-properties/hint-property/hint-property.component.ts Add eager CD to hint property.
core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/fields/content-type-fields-properties-form/field-properties/dot-relationships-property/dot-relationships-property.component.ts Add eager CD to relationships property.
core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/fields/content-type-fields-properties-form/field-properties/dot-relationships-property/dot-new-relationships/dot-new-relationships.component.ts Add eager CD to new relationships component.
core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/fields/content-type-fields-properties-form/field-properties/dot-relationships-property/dot-edit-relationship/dot-edit-relationships.component.ts Add eager CD to edit relationships component.
core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/fields/content-type-fields-properties-form/field-properties/dot-relationships-property/dot-cardinality-selector/dot-cardinality-selector.component.ts Add eager CD to cardinality selector.
core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/fields/content-type-fields-properties-form/field-properties/default-value-property/default-value-property.component.ts Add eager CD to default-value property.
core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/fields/content-type-fields-properties-form/field-properties/data-type-property/data-type-property.component.ts Add eager CD to data-type property.
core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/fields/content-type-fields-properties-form/field-properties/checkbox-property/checkbox-property.component.ts Add eager CD to checkbox property.
core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/fields/content-type-fields-properties-form/field-properties/categories-property/categories-property.component.ts Add eager CD to categories property.
core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/fields/content-type-fields-properties-form/content-type-fields-properties-form.component.ts Add eager CD to properties form wrapper.
core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/fields/content-type-fields-drop-zone/content-type-fields-drop-zone.component.ts Add eager CD to drop zone component.
core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/fields/content-type-fields-add-row/content-type-fields-add-row.component.ts Add eager CD to add-row component.
core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/dot-convert-wysiwyg-to-block/dot-convert-wysiwyg-to-block.component.ts Add eager CD to conversion component.
core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/dot-convert-to-block-info/dot-convert-to-block-info.component.ts Add eager CD to conversion info component.
core-web/apps/dotcms-ui/src/app/portlets/dot-templates/dot-template-list/dot-template-list.component.ts Add eager CD to template list.
core-web/apps/dotcms-ui/src/app/portlets/dot-templates/dot-template-create-edit/dot-template-props/dot-template-thumbnail-field/dot-template-thumbnail-field.component.spec.ts Add async-binding test coverage for thumbnail preview updates.
core-web/apps/dotcms-ui/src/app/portlets/dot-templates/dot-template-create-edit/dot-template-props/dot-template-props.component.ts Add eager CD to template props.
core-web/apps/dotcms-ui/src/app/portlets/dot-templates/dot-template-create-edit/dot-template-new/dot-template-new.component.ts Add eager CD to template-new component.
core-web/apps/dotcms-ui/src/app/portlets/dot-templates/dot-template-create-edit/dot-template-create-edit.component.ts Add eager CD to template create/edit wrapper.
core-web/apps/dotcms-ui/src/app/portlets/dot-templates/dot-template-create-edit/dot-template-builder/dot-template-builder.component.ts Add eager CD to template builder.
core-web/apps/dotcms-ui/src/app/portlets/dot-templates/dot-template-create-edit/dot-template-advanced/dot-template-advanced.component.ts Add eager CD to template advanced editor.
core-web/apps/dotcms-ui/src/app/portlets/dot-starter/dot-starter.component.ts Add eager CD to starter portlet.
core-web/apps/dotcms-ui/src/app/portlets/dot-starter/components/onboarding-dev/onboarding-dev.component.ts Add eager CD to onboarding dev component.
core-web/apps/dotcms-ui/src/app/portlets/dot-starter/components/onboarding-author/onboarding-author.component.ts Add eager CD to onboarding author component.
core-web/apps/dotcms-ui/src/app/portlets/dot-porlet-detail/dot-workflow-task/dot-workflow-task.component.ts Add eager CD to workflow task wrapper.
core-web/apps/dotcms-ui/src/app/portlets/dot-porlet-detail/dot-portlet-detail.component.ts Add eager CD to portlet detail component.
core-web/apps/dotcms-ui/src/app/portlets/dot-porlet-detail/dot-contentlets/dot-contentlets.component.ts Add eager CD to contentlets wrapper.
core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages.component.ts Add eager CD to pages portlet.
core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages-table/dot-pages-table.component.ts Add eager CD to pages table.
core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-page-favorites-panel/dot-pages-card/dot-pages-card.component.ts Add eager CD to pages card.
core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-page-favorites-panel/dot-page-favorites-panel.component.ts Add eager CD to favorites panel.
core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-create-page-dialog/dot-create-page-dialog.component.ts Add eager CD to create-page dialog.
core-web/apps/dotcms-ui/src/app/portlets/dot-form-builder/dot-form-builder.component.ts Add eager CD to form builder wrapper.
core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-loop-editor/dot-loop-editor.component.ts Add eager CD to loop editor.
core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/dot-container-properties.component.ts Add eager CD to container properties.
core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-permissions/dot-container-permissions.component.ts Add eager CD to container permissions.
core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-history/dot-container-history.component.ts Add eager CD to container history.
core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-create.component.ts Add eager CD to container create root.
core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-code/dot-container-code.component.ts Add eager CD to container code editor.
core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-code/dot-add-variable/dot-add-variable.component.ts Add eager CD to add-variable dialog.
core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-list/container-list.component.ts Add eager CD to container list.
core-web/apps/dotcms-ui/src/app/portlets/dot-apps/dot-apps-list/dot-apps-list.component.ts Add eager CD to apps list.
core-web/apps/dotcms-ui/src/app/portlets/dot-apps/dot-apps-list/dot-apps-card/dot-apps-card.component.ts Add eager CD to apps card.
core-web/apps/dotcms-ui/src/app/portlets/dot-apps/dot-apps-import-export-dialog/dot-apps-import-export-dialog.component.ts Add eager CD to import/export dialog.
core-web/apps/dotcms-ui/src/app/portlets/dot-apps/components/dot-apps-configuration/dot-apps-configuration.component.ts Add eager CD to apps configuration.
core-web/apps/dotcms-ui/src/app/portlets/dot-apps/components/dot-apps-configuration/dot-apps-configuration-list/dot-apps-configuration-list.component.ts Add eager CD to configuration list.
core-web/apps/dotcms-ui/src/app/portlets/dot-apps/components/dot-apps-configuration/dot-apps-configuration-list/dot-apps-configuration-item/dot-apps-configuration-item.component.ts Add eager CD to configuration item.
core-web/apps/dotcms-ui/src/app/portlets/dot-apps/components/dot-apps-configuration-detail/dot-apps-configuration-detail.component.ts Add eager CD to configuration detail.
core-web/apps/dotcms-ui/src/app/portlets/dot-apps/components/dot-apps-configuration-detail/components/dot-apps-configuration-header/dot-apps-configuration-header.component.ts Add eager CD to configuration header.
core-web/apps/dotcms-ui/src/app/portlets/dot-apps/components/dot-apps-configuration-detail/components/dot-apps-configuration-detail-form/dot-apps-configuration-detail-form.component.ts Add eager CD to configuration form.
core-web/apps/dotcms-ui/src/app/portlets/dot-apps/components/dot-ai-config-detail/dot-ai-config-detail.component.ts Add eager CD to AI config detail.
core-web/apps/dotcms-ui/src/app/app.component.ts Add eager CD to app root component.
core-web/apps/dotcms-ui/src/app/api/services/dot-remote-module-wrapper.component.ts Add eager CD to remote module wrapper.
core-web/apps/dotcms-ui/src/app/api/services/dot-custom-event-handler/dot-custom-event-handler.service.ts Register iframe event handlers synchronously; switch handlers on flag resolution.
core-web/apps/dotcms-ui/src/app/api/services/dot-custom-event-handler/dot-custom-event-handler.service.spec.ts Add/adjust tests for early event handling before flag resolution.
core-web/apps/dotcms-binary-field-builder/src/app/app.component.ts Add eager CD to binary-field-builder app root.
core-web/apps/dotcdn/src/app/app.component.ts Add eager CD to dotcdn app root.

Comment thread .../dotcms-ui/src/app/api/services/dot-custom-event-handler/dot-custom-event-handler.service.ts Outdated
@nicobytes
Merge branch 'main' into nicobytes/35930-angular-22-bugs
f86a6df
@nicobytes
Refactor app.component.ts to use ChangeDetectionStrategy.Eager
4fdd451 
Updated the app component to explicitly set the ChangeDetectionStrategy to Eager, aligning it with Angular's new default behavior post-upgrade. Additionally, removed a commented-out note regarding testing for the 'edit-host' event in the DotCustomEventHandlerService, streamlining the code for clarity.
@nicobytes
nicobytes enabled auto-merge August 5, 2026 22:15
@nicobytes
nicobytes added this pull request to the merge queue Aug 5, 2026
@mergify

mergify Bot commented Aug 5, 2026

Copy link
Copy Markdown

Tick the box to add this pull request to the merge queue (same as @mergifyio queue).

  • Queue this pull request

Merged via the queue into main with commit 9307301 Aug 6, 2026
50 checks passed
@nicobytes
nicobytes deleted the nicobytes/35930-angular-22-bugs branch August 6, 2026 00:00
This was referenced Aug 11, 2026
Open
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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
@hmoreras hmoreras hmoreras approved these changes

Assignees

No one assigned

Labels

Area : Frontend PR changes Angular/TypeScript frontend code Area : SDK PR changes SDK libraries

Projects

dotCMS - Product Planning
Status: No status

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Migrate Angular 21 → Angular 22 (TypeScript 6) across the core-web Nx workspace

3 participants

@nicobytes @hmoreras