fix(combo): declare the item window @let outside the drop-down - #17645
Open
viktorkombov wants to merge 2 commits into
Open
viktorkombov wants to merge 2 commits into
viktorkombov wants to merge 2 commits into
Conversation
The drop-down projects its content behind `@if (!collapsed)`, so while the combo is closed that content is not in the server DOM. Angular serializes a @let by recording a DOM path to its next sibling, which inside the drop-down is that detached content, so prerendering a route with a combo failed with NG0502. Simple combo already declared its @let outside the drop-down. Both placements belong to the same declaring view, so the scope of itemWindow, the pipes feeding it and every consumer are unchanged. Adds scripts/ssr/hydration.spec.mjs, run by `npm run test:ssr` and wired into the CI test step. It renders both combos through platform-server with hydration enabled and asserts the output serializes with the drop-down closed. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The project declared RenderMode.Prerender but its build was missing
outputMode "static", so it reported "Prerendered 0 static routes" and never
rendered a page. Enabling it surfaced a second latent break: server.ts
registered the catch-all as the Express 4 style app.use('/**', ...), which
Express 5 rejects with "Missing parameter name at index 2".
With both fixed the project prerenders all 9 routes. The new /combo route
renders igx-combo and igx-simple-combo, covering hydration serialization
through the full AOT and prerender path.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
Copilot review overview
🟡 Changes recommended
The SSR test imports provideServerRendering from the wrong package, causing npm run test:ssr to fail before tests run.
Get a fresh assessment by requesting another Copilot review.
Review effort: Lite
Findings: 1
Open (1)
What changed in this PR
Fixes SSR hydration failures by moving itemWindow outside detached combo drop-down content and adding regression coverage.
Changes:
- Relocates the
@let itemWindowdeclaration. - Adds SSR hydration tests and bundle-test coverage.
- Integrates SSR testing into CI.
| File | Changes |
|---|---|
scripts/ssr/hydration.spec.mjs |
Adds SSR hydration tests; its provideServerRendering import must be corrected. |
projects/igniteui-angular/combo/src/combo/combo.component.html |
Moves itemWindow outside the drop-down. |
projects/bundle-test/src/app/combo/combo.component.ts |
Adds the combo bundle-test component. |
projects/bundle-test/src/app/combo/combo.component.scss |
Adds combo test styling. |
projects/bundle-test/src/app/combo/combo.component.html |
Renders combo test cases. |
projects/bundle-test/src/app/app.routes.ts |
Registers the combo route. |
projects/bundle-test/server.ts |
Updates SSR request handling. |
package.json |
Adds the SSR test command. |
angular.json |
Enables static output. |
.github/workflows/nodejs.yml |
Runs SSR tests in CI. |
💡 Add a code-review agent skill for context-aware, tailored reviews. Learn more in the docs.
viktorkombov
added
❌ status: awaiting-test
This branch has not been deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #17644
Description
Moves the combo's
@let itemWindowdeclaration out of the drop-down content and in front of<igx-combo-drop-down>, so a combo can be prerendered again.The drop-down projects its content behind
@if (!collapsed), so while the combo is closed that content is not in the server DOM. Angular serializes a@letby recording a DOM path to its next sibling, which inside the drop-down is that detached content, and serialization fails withNG0502.igx-simple-comboalready declared its@letoutside the drop-down, so this aligns the two.Both positions belong to the same declaring view, so the scope of
itemWindow, the pipes feeding it and every consumer are unchanged.Motivation / Context
Regressed in 22.2.0-rc.0, when the combo list moved from
igxFortoIgxVirtualScrollComponentand gained the@let. Any prerendered route containing a combo now fails the build, directly or through the Query Builder, which uses a combo internally:Type of Change (check all that apply):
Component(s) / Area(s) Affected:
Combo, Simple Combo, SSR/hydration, CI
How Has This Been Tested?
Adds
scripts/ssr/hydration.spec.mjs, run bynpm run test:ssrand wired into the Test step ofnodejs.ymlafter Build Lib. It renders both combos through@angular/platform-serverwith server rendering and hydration enabled, then asserts the output carries hydration annotations, serialized hydration state and a drop-down rendered closed. It takes about 1.5s againstdist/.npm run test:ssr@letmoved backigx-combofails with NG0502,igx-simple-combostill passesprovideServerRendering()nghmarker; both combos then open, filter and selectTest Configuration:
Screenshots / Recordings
n/a, no visual change.
Checklist:
feature/README.MDupdates for the feature docsREADME.MDCHANGELOG.MDupdates for newly added functionalityng updatemigrations for the breaking changesNo changelog entry: this fixes an unreleased change already described under Unreleased. No public API, DOM structure or styling changes.