Skip to content

Conversation

Copy link
Contributor

Copilot AI commented Jan 29, 2026

Angular 21 upgrade broke component initialization, unit tests, and modal dropdowns due to stricter lifecycle rules and new dialog top-layer implementation.

Changes

Component Lifecycle

  • Added ChangeDetectorRef.markForCheck() after async data updates in ngOnInit() chains
  • Affects: EformsPageComponent, FullLayoutComponent, FooterComponent, EntityEditCreateComponent, NavigationComponent, HeaderComponent, FoldersComponent, EntitySearchComponent, EntitySelectComponent
  • Angular 21 enforces stricter change detection during initialization; synchronous detectChanges() in init phase blocks subsequent async operations

Unit Test Compatibility

  • Fixed TranslateService mocks with complete interface including getParsedResult(), getCurrentLang(), event emitters
  • Added EventEmitter for onLangChange, onTranslationChange, onDefaultLangChange (required by Angular 21's TranslatePipe)
  • Affects 22 test files

Property Binding Syntax

  • Corrected dropdownPosition from string attribute to property binding: [dropdownPosition]="'bottom'"
  • 13 component templates updated

Modal Dropdown Positioning (Partial)

  • Added [appendTo]="'.cdk-overlay-pane'" to mtx-select components in modals
  • Addresses Angular 21's HTML Dialog API top-layer stacking (elements outside top-layer render behind dialogs)
  • 11 modal templates updated
  • Note: Positioning calculations still problematic; mtx-select uses Angular Material CDK overlays (not ng-select), may require library update for full Angular 21 compatibility

Known Limitation

mtx-select dropdowns in modals remain imperfectly positioned. Angular 21's native top-layer (via popover="manual") creates new stacking context incompatible with current mtx-select overlay implementation. The appendTo workaround keeps dropdowns visible but positioning relative to input fields is incorrect.

Original prompt

This section details on the original issue you should resolve

<issue_title>Branch: angular19 - Fixing eerror</issue_title>
<issue_description>On the angular19 branch which is updated to have these errors when loading:

ERROR RuntimeError: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: '[]'. Current value: '[{"id":1,"createdAt":"2026-01-29T06:50:55.000Z","updatedAt":null,"label":"sfsfdsf","description":null,"repeated":1,"folderName":null,"workflowState":"created","deployedSites":[],"hasCases":false,"disp…'. Expression location: EformsPageComponent2 component. Find more at https://v21.angular.dev/errors/NG0100
    at throwErrorIfNoChangesMode (_debug_node-chunk.mjs:3475:9)
    at bindingUpdated (_debug_node-chunk.mjs:7918:9)
    at Module.ɵɵproperty (_debug_node-chunk.mjs:14300:7)
    at EformsPageComponent_Template (eforms-page.component.html:98:3)
```</issue_description>

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

<comments>
</comments>


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

@CLAassistant
Copy link

CLA assistant check
Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
You have signed the CLA already but the status is still pending? Let us recheck it.

Copilot AI and others added 2 commits January 29, 2026 09:33
Co-authored-by: renemadsen <76994+renemadsen@users.noreply.github.com>
Co-authored-by: renemadsen <76994+renemadsen@users.noreply.github.com>
Copilot AI changed the title [WIP] Fix ExpressionChangedAfterItHasBeenCheckedError on angular19 Fix NG0100 ExpressionChangedAfterItHasBeenCheckedError in EformsPageComponent Jan 29, 2026
Copilot AI requested a review from renemadsen January 29, 2026 09:42
@renemadsen
Copy link
Member

@copilot rebase or make any smal change, so the github actions pr pipeline is getting triggered

Co-authored-by: renemadsen <76994+renemadsen@users.noreply.github.com>
Copy link
Contributor Author

Copilot AI commented Jan 29, 2026

@copilot rebase or make any smal change, so the github actions pr pipeline is getting triggered

Added a clarifying comment to trigger the CI pipeline. Commit: 04dd2f4

Copilot AI and others added 2 commits January 29, 2026 10:41
…s components

Co-authored-by: renemadsen <76994+renemadsen@users.noreply.github.com>
…n strategy

Co-authored-by: renemadsen <76994+renemadsen@users.noreply.github.com>
Copilot AI changed the title Fix NG0100 ExpressionChangedAfterItHasBeenCheckedError in EformsPageComponent Fix ExpressionChangedAfterItHasBeenCheckedError in 4 components on Angular 19 upgrade Jan 29, 2026
Copilot AI and others added 2 commits January 29, 2026 11:04
…nents

Co-authored-by: renemadsen <76994+renemadsen@users.noreply.github.com>
Co-authored-by: renemadsen <76994+renemadsen@users.noreply.github.com>
Copilot AI changed the title Fix ExpressionChangedAfterItHasBeenCheckedError in 4 components on Angular 19 upgrade Fix ExpressionChangedAfterItHasBeenCheckedError in 9 components on Angular 19 Jan 29, 2026
Co-authored-by: renemadsen <76994+renemadsen@users.noreply.github.com>
Copilot AI changed the title Fix ExpressionChangedAfterItHasBeenCheckedError in 9 components on Angular 19 Fix unit tests broken by ChangeDetectorRef injection Jan 29, 2026
…alogs

Co-authored-by: renemadsen <76994+renemadsen@users.noreply.github.com>
Copilot AI changed the title Fix Angular 21 upgrade issues: change detection errors, test mocks, and modal dropdown rendering Fix Angular 21 upgrade issues: change detection, test mocks, and popover top layer dropdowns Jan 29, 2026
Copilot AI changed the title Fix Angular 21 upgrade issues: change detection, test mocks, and popover top layer dropdowns Fix Angular 21 upgrade issues: change detection, test mocks, and modal dropdowns Jan 29, 2026
…r modal dropdowns

Co-authored-by: renemadsen <76994+renemadsen@users.noreply.github.com>
Copilot AI changed the title Fix Angular 21 upgrade issues: change detection, test mocks, and modal dropdowns Fix Angular 21 change detection errors and modal dropdown positioning Jan 29, 2026
…odals

Co-authored-by: renemadsen <76994+renemadsen@users.noreply.github.com>
Copilot AI changed the title Fix Angular 21 change detection errors and modal dropdown positioning Fix Angular 21 compatibility issues: change detection, test mocks, and modal dropdowns Jan 29, 2026
…ositioning

Co-authored-by: renemadsen <76994+renemadsen@users.noreply.github.com>
Copilot AI changed the title Fix Angular 21 compatibility issues: change detection, test mocks, and modal dropdowns Fix Angular 21 compatibility: lifecycle errors, test mocks, and modal dropdowns Jan 30, 2026
Copilot AI changed the title Fix Angular 21 compatibility: lifecycle errors, test mocks, and modal dropdowns Fix Angular 21 compatibility: lifecycle, tests, and modal dropdown positioning Jan 30, 2026
…o solution

Co-authored-by: renemadsen <76994+renemadsen@users.noreply.github.com>
Copilot AI changed the title Fix Angular 21 compatibility: lifecycle, tests, and modal dropdown positioning Fix Angular 21 change detection errors and modal dropdown positioning Jan 30, 2026
Copilot AI changed the title Fix Angular 21 change detection errors and modal dropdown positioning Fix Angular 21 upgrade issues: change detection, test mocks, and modal dropdowns Jan 30, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants