Skip to content

Angular 21: standalone components, Vitest and angular19 CI - #2144

Merged
renemadsen merged 8 commits into
angular19from
ng21/migrate
Oct 18, 2026
Merged

renemadsen merged 8 commits into
angular19from
ng21/migrate

Conversation

@renemadsen

Copy link
Copy Markdown
Member

Part of the Angular 21 upgrade. The frontend's angular19 branch is now on Angular 21 with standalone components and Vitest (microting/eform-angular-frontend#8155).

  • CI: PR CI checks out the frontend (and any sibling plugins) at the branch the PR targets. Corepack is enabled before every yarn install, because the frontend's angular19 pins Yarn 4. The Dockerfile builds the frontend with yarn. Dead WDIO copy steps are removed.
  • Standalone: every component now imports exactly what its template uses. NgModule declarations are removed.
  • Fixes found on the way: planning tags render in a mat-chip-set. mat-chip-list no longer exists in Material, so the tags were already rendering broken. Repeated planning IDs are now indexed, with selectors updated. The tags dialog now gets its tags via setAvailableTags().
  • Tests: the scaffold specs are rewritten for Vitest (6 files, 7 tests), and a new angular-unit-test CI job runs them with ng test.

Verified locally with ng build against frontend angular19, together with the other migrated plugins. Code reviewed. Not yet clicked through in a browser.

🤖 Generated with Claude Code

renemadsen and others added 6 commits October 18, 2026 08:00
PR CI checks out the frontend (and sibling plugins) at the branch the PR
targets instead of always stable. Corepack is enabled before every yarn
install, since the frontend's angular19 branch pins yarn@4; the Docker
build uses yarn for the frontend build as well. Dead WDIO config copies
are dropped (the frontend no longer has WDIO).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…lar 21

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…exists)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Copilot AI balanced review requested due to automatic review settings October 18, 2026 06:17

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

🔵 Needs a closer look

The cross-repository Angular migration needs confirmed CI results and browser validation before final human approval.

No open issues 🎉

What changed in this PR

Updates the items-planning plugin for the frontend’s Angular 21 migration, covering standalone components, Vitest tests, and CI integration.

Changes:

  • Moves template dependencies into standalone components and simplifies NgModules.
  • Updates tag rendering, dialog tag refreshes, and indexed row selectors.
  • Migrates six test files to Vitest and adds CI test jobs with Corepack/Yarn support.
File Description
eform-client/​src/​app/​plugins/​modules/​items-planning-pn/​modules/​plannings/​plannings.module.ts Imports standalone planning components.
eform-client/​src/​app/​plugins/​modules/​items-planning-pn/​modules/​plannings/​components/​plannings-page/​plannings-table/​plannings-table.component.ts Adds standalone table dependencies.
eform-client/​src/​app/​plugins/​modules/​items-planning-pn/​modules/​plannings/​components/​plannings-page/​plannings-table/​plannings-table.component.html Uses chip sets and indexed tag IDs.
eform-client/​src/​app/​plugins/​modules/​items-planning-pn/​modules/​plannings/​components/​plannings-page/​plannings-header/​plannings-header.component.ts Adds standalone header dependencies.
eform-client/​src/​app/​plugins/​modules/​items-planning-pn/​modules/​plannings/​components/​plannings-page/​plannings-header/​plannings-header.component.spec.ts Migrates header test to Vitest.
eform-client/​src/​app/​plugins/​modules/​items-planning-pn/​modules/​plannings/​components/​plannings-page/​plannings-container/​plannings-container.component.ts Imports standalone child components.
eform-client/​src/​app/​plugins/​modules/​items-planning-pn/​modules/​plannings/​components/​planning-additions/​plannings-bulk-import-modal/​plannings-bulk-import-modal.component.ts Adds standalone import-dialog dependencies.
eform-client/​src/​app/​plugins/​modules/​items-planning-pn/​modules/​plannings/​components/​planning-additions/​plannings-bulk-import-modal/​plannings-bulk-import-modal.component.spec.ts Migrates import-dialog test to Vitest.
eform-client/​src/​app/​plugins/​modules/​items-planning-pn/​modules/​plannings/​components/​planning-additions/​planning-tags/​planning-tags.component.ts Enables standalone mode and updates dialog tags through its setter.
eform-client/​src/​app/​plugins/​modules/​items-planning-pn/​modules/​plannings/​components/​planning-additions/​planning-folders-modal/​planning-folders-modal.component.ts Adds standalone folder-dialog dependencies.
eform-client/​src/​app/​plugins/​modules/​items-planning-pn/​modules/​plannings/​components/​planning-additions/​planning-folders-modal/​planning-folders-modal.component.spec.ts Corrects component reference and migrates to Vitest.
eform-client/​src/​app/​plugins/​modules/​items-planning-pn/​modules/​plannings/​components/​planning-actions/​planning-multiple-delete/​planning-multiple-delete.component.ts Adds standalone bulk-delete dependencies.
eform-client/​src/​app/​plugins/​modules/​items-planning-pn/​modules/​plannings/​components/​planning-actions/​planning-edit/​planning-edit.component.ts Adds standalone editing dependencies.
eform-client/​src/​app/​plugins/​modules/​items-planning-pn/​modules/​plannings/​components/​planning-actions/​planning-delete/​planning-delete.component.ts Adds standalone delete-dialog dependencies.
eform-client/​src/​app/​plugins/​modules/​items-planning-pn/​modules/​plannings/​components/​planning-actions/​planning-create/​planning-create.component.ts Adds standalone creation dependencies.
eform-client/​src/​app/​plugins/​modules/​items-planning-pn/​modules/​plannings/​components/​planning-actions/​planning-assign-sites-modal/​planning-assign-sites-modal.component.ts Adds standalone site-assignment dependencies.
eform-client/​src/​app/​plugins/​modules/​items-planning-pn/​modules/​pairing/​pairing.module.ts Imports standalone pairing components.
eform-client/​src/​app/​plugins/​modules/​items-planning-pn/​modules/​pairing/​components/​pairing-grid-update/​pairing-grid-update.component.ts Adds standalone update-dialog dependencies.
eform-client/​src/​app/​plugins/​modules/​items-planning-pn/​modules/​pairing/​components/​pairing-grid-update/​pairing-grid-update.component.spec.ts Migrates to Vitest and tests pairing classification.
eform-client/​src/​app/​plugins/​modules/​items-planning-pn/​modules/​pairing/​components/​pairing-grid-table/​pairing-grid-table.component.ts Adds standalone pairing-table dependencies.
eform-client/​src/​app/​plugins/​modules/​items-planning-pn/​modules/​pairing/​components/​pairing-grid-table/​pairing-grid-table.component.spec.ts Migrates table test to Vitest.
eform-client/​src/​app/​plugins/​modules/​items-planning-pn/​modules/​pairing/​components/​pairing-grid-table/​pairing-grid-table.component.html Indexes planning-name IDs.
eform-client/​src/​app/​plugins/​modules/​items-planning-pn/​modules/​pairing/​components/​pairing-grid-page/​pairing-grid-page.component.ts Adds standalone page dependencies.
eform-client/​src/​app/​plugins/​modules/​items-planning-pn/​modules/​pairing/​components/​pairing-grid-page/​pairing-grid-page.component.spec.ts Migrates page construction test to Vitest.
eform-client/​src/​app/​plugins/​modules/​items-planning-pn/​layouts/​items-planning-pn-layout.component.ts Imports RouterOutlet directly.
eform-client/​src/​app/​plugins/​modules/​items-planning-pn/​items-planning-pn.module.ts Simplifies imports around the standalone layout.
eform-client/​playwright/​e2e/​plugins/​items-planning-pn/​ItemsPlanningPairingPage.ts Updates Playwright selectors for indexed IDs.
eform-client/​e2e/​Page objects/​ItemsPlanning/​ItemsPlanningPairingPage.ts Updates WebdriverIO selectors for indexed IDs.
Dockerfile Enables Corepack and builds with Yarn.
.github/​workflows/​dotnet-core-pr.yml Aligns frontend checkout with the target branch and adds unit tests.
.github/​workflows/​dotnet-core-master.yml Adds branch-aligned unit tests and Corepack setup.

Review effort: Balanced

…ervices

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Copilot AI balanced review requested due to automatic review settings October 18, 2026 06:27

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

🔵 Needs a closer look

The cross-repository Angular migration needs integrated CI and browser validation before final human approval.

No open issues 🎉

1 previously missed issue

In code that hasn't changed since last review

Medium severity Make tag filter chips keyboard-accessible

eform-client/​src/​app/​plugins/​modules/​items-planning-pn/​modules/​plannings/​components/​plannings-page/​plannings-table/​plannings-table.component.html:35

The new mat-chip-set contains plain mat-chip elements, which are intended for non-interactive content, but each tag still filters the table through (click). This does not provide keyboard activation, so keyboard users cannot activate these tag filters. Use native buttons or an interactive mat-chip-listbox/mat-chip-option implementation with an accessible label and a selection handler that preserves the filtering behavior; update the standalone imports as needed.

Review effort: Balanced

…vide it

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Copilot AI balanced review requested due to automatic review settings October 18, 2026 07:24

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

🔵 Needs a closer look

The cross-repository Angular migration still needs confirmed CI results and browser validation of planning, pairing, and dialog flows.

No open issues 🎉

Review effort: Balanced

@renemadsen
renemadsen merged commit 05e7913 into angular19 Oct 18, 2026
9 of 10 checks passed
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.

2 participants