chore(LFXV2-242): update dependencies and fix SSR hydration issues#35
chore(LFXV2-242): update dependencies and fix SSR hydration issues#35
Conversation
- Update Angular dependencies from 19.2.0 to 19.2.14/19.2.15 - Update PrimeNG from 19.1.3 to 19.1.4 - Update FullCalendar from 6.1.18 to 6.1.19 - Update TypeScript ESLint packages from 8.37.0 to 8.39.1 - Update various other dev dependencies - Add ngSkipHydration to BreadcrumbComponent and HeaderComponent to fix SSR hydration issues - Update CLAUDE.md to require JIRA ticket association for commits 🤖 Generated with [Claude Code](https://claude.ai/code) Signed-off-by: Asitha de Silva <asithade@gmail.com>
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughAdded documentation policy requiring JIRA ticket references; bumped multiple dependency and devDependency versions across manifests; added ngSkipHydration host flag to Header and Breadcrumb Angular components to opt them out of client-side hydration. No runtime logic or public APIs changed. Changes
Sequence Diagram(s)sequenceDiagram
participant SSR as Server (SSR)
participant Browser as Client
participant Header as HeaderComponent
participant Crumb as BreadcrumbComponent
SSR->>Browser: Serve SSR-rendered HTML
Browser->>Browser: Begin Angular hydration
Browser->>Header: Evaluate ngSkipHydration
alt ngSkipHydration = true
Browser--x Header: Skip hydration for Header
end
Browser->>Crumb: Evaluate ngSkipHydration
alt ngSkipHydration = true
Browser--x Crumb: Skip hydration for Breadcrumb
end
Browser->>Browser: Hydrate remaining components normally
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~15 minutes Possibly related PRs
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
✨ Finishing Touches
🧪 Generate unit tests
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
github-actions
bot
requested review from
andrest50,
audigregorie and
mauriciozanettisalomao
There was a problem hiding this comment.
Pull Request Overview
This PR updates Angular, PrimeNG, and other dependencies to their latest stable versions while fixing SSR hydration issues in key components. The changes include dependency updates across multiple packages and selective hydration skipping for components experiencing SSR mismatches.
- Angular ecosystem updated from 19.2.0 to 19.2.14/19.2.15 with supporting tooling updates
- PrimeNG and FullCalendar minor version bumps for bug fixes and improvements
- SSR hydration fixes applied to BreadcrumbComponent and HeaderComponent
Reviewed Changes
Copilot reviewed 6 out of 7 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| package.json | Root package dependency updates including TypeScript ESLint and build tools |
| apps/lfx-pcc/package.json | Angular ecosystem and UI library updates for the main application |
| packages/shared/package.json | FullCalendar core library version bump |
| apps/lfx-pcc/src/app/shared/components/header/header.component.ts | Added ngSkipHydration to resolve SSR hydration issues |
| apps/lfx-pcc/src/app/shared/components/breadcrumb/breadcrumb.component.ts | Added ngSkipHydration to resolve SSR hydration issues |
| CLAUDE.md | Added requirement for JIRA ticket association with commits and PRs |
apps/lfx-pcc/src/app/shared/components/breadcrumb/breadcrumb.component.ts
Show resolved
Hide resolved
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
CLAUDE.md (1)
115-116: Tighten wording and show a concrete example for consistency.Minor grammar tweak and adding an example makes the policy unambiguous in commit messages/PR titles.
Apply this diff:
-- All commits and pull requests need to be associated to a JIRA ticket. If there isn't one, we need to create it and reference it moving forward. +- All commits and pull requests must be associated with a JIRA ticket (e.g., LFXV2-242). If none exists, create one and reference it in all future commits and PRs.If helpful, I can also add a commitlint rule and PR title check to enforce this automatically. Do you want me to open a follow-up PR?
apps/lfx-pcc/src/app/shared/components/breadcrumb/breadcrumb.component.ts (1)
15-16: Add a brief rationale to aid future maintenance.A one-line comment helps explain why hydration is skipped and links it to the ticket.
@Component({ selector: 'lfx-breadcrumb', standalone: true, imports: [CommonModule, RouterModule, BreadcrumbModule], templateUrl: './breadcrumb.component.html', + // SSR: Skip hydration to prevent mismatch (LFXV2-242). Revisit when the template becomes deterministic. host: { ngSkipHydration: 'true' }, })apps/lfx-pcc/src/app/shared/components/header/header.component.ts (1)
25-26: Document the intent and watch for CLS.Add a short comment explaining the skip; also verify in QA that initial client render doesn’t introduce a noticeable layout shift vs SSR.
styleUrl: './header.component.scss', schemas: [CUSTOM_ELEMENTS_SCHEMA], + // SSR: Skip hydration to avoid mismatches due to dynamic header state (LFXV2-242). Monitor for CLS on first paint. host: { ngSkipHydration: 'true' },QA tip: Load a few critical routes with throttled CPU/network and confirm no hydration warnings appear in the console and no visible flicker/shift occurs around the header on first paint.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (6)
CLAUDE.md(1 hunks)apps/lfx-pcc/package.json(1 hunks)apps/lfx-pcc/src/app/shared/components/breadcrumb/breadcrumb.component.ts(1 hunks)apps/lfx-pcc/src/app/shared/components/header/header.component.ts(1 hunks)package.json(1 hunks)packages/shared/package.json(1 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
{apps,packages}/**/*.{ts,tsx,js,jsx,css,scss}
📄 CodeRabbit Inference Engine (CLAUDE.md)
License headers are required on all source files
Files:
apps/lfx-pcc/src/app/shared/components/breadcrumb/breadcrumb.component.tsapps/lfx-pcc/src/app/shared/components/header/header.component.ts
**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (CLAUDE.md)
Use TypeScript interfaces instead of union types for better maintainability
Files:
apps/lfx-pcc/src/app/shared/components/breadcrumb/breadcrumb.component.tsapps/lfx-pcc/src/app/shared/components/header/header.component.ts
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit Inference Engine (CLAUDE.md)
Do not nest ternary expressions
Files:
apps/lfx-pcc/src/app/shared/components/breadcrumb/breadcrumb.component.tsapps/lfx-pcc/src/app/shared/components/header/header.component.ts
🧠 Learnings (3)
📚 Learning: 2025-08-07T16:35:57.360Z
Learnt from: CR
PR: linuxfoundation/lfx-v2-pcc-ui#0
File: CLAUDE.md:0-0
Timestamp: 2025-08-07T16:35:57.360Z
Learning: Applies to apps/**/src/**/*.html : Use data-testid naming convention - '[section]-[component]-[element]' for hierarchical structure
Applied to files:
CLAUDE.md
📚 Learning: 2025-08-07T16:35:57.360Z
Learnt from: CR
PR: linuxfoundation/lfx-v2-pcc-ui#0
File: CLAUDE.md:0-0
Timestamp: 2025-08-07T16:35:57.360Z
Learning: Applies to apps/**/src/**/*.html : Always add data-testid attributes when creating new components for reliable test targeting
Applied to files:
CLAUDE.md
📚 Learning: 2025-08-07T16:35:57.360Z
Learnt from: CR
PR: linuxfoundation/lfx-v2-pcc-ui#0
File: CLAUDE.md:0-0
Timestamp: 2025-08-07T16:35:57.360Z
Learning: Applies to packages/shared/src/{interfaces,constants,enums}/**/*.{ts,tsx} : All shared types, interfaces, and constants are centralized in lfx-pcc/shared package
Applied to files:
apps/lfx-pcc/package.json
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Code Quality Checks
🔇 Additional comments (7)
packages/shared/package.json (2)
44-44: Patch bump to @fullcalendar/core looks good.Non-breaking update; aligns with app-level FullCalendar packages in this PR.
44-44: All @fullcalendar dependencies are now at ^6.1.19
No references to 6.1.18 were found in any package.json—versions are consistent across all workspaces.apps/lfx-pcc/src/app/shared/components/breadcrumb/breadcrumb.component.ts (1)
15-15: Correct use of ngSkipHydration to address SSR mismatch.This is the appropriate, minimal fix to avoid hydration errors for this component.
package.json (1)
28-41: Dev tooling bumps look compatible and scoped.ESLint 9.33 with TS-ESLint 8.39 is a compatible pairing; turbo and lint-staged bumps are routine. No concerns from me.
apps/lfx-pcc/src/app/shared/components/header/header.component.ts (1)
25-25: LGTM — skipping hydration on Header is reasonable given dynamic UI.Given the dynamic DOM (signals for mobile search, user menu), skipping hydration is a pragmatic way to eliminate mismatches.
apps/lfx-pcc/package.json (2)
21-47: Angular/PrimeNG/FullCalendar upgrades are cohesive and within patch/minor bounds.Versions are aligned across the Angular stack and PrimeNG; RxJS 7.8.2 and tslib 2.8.1 are compatible with Angular 19.
21-77: Sanity-check TypeScript version consistency across workspacesOur scan shows that only apps/lfx-pcc/package.json declares Angular packages (all at ^19.2.x), so there’s no divergence there—but the TypeScript versions diverge:
• apps/lfx-pcc/package.json: typescript → ~5.7.2
• package.json (root): typescript → 5.8.3
• packages/shared/package.json: typescript → 5.8.3Under Yarn 4 PnP, the Angular CLI builder should resolve to the TS version declared in the app workspace (~5.7.2), but it’s worth confirming this behavior or unifying the version to avoid subtle mismatches.
Please verify that the Angular build uses the intended TS (~5.7.2) or consider aligning all workspaces to the same TS version (e.g., bump the app to 5.8.3 or add a Yarn resolution).
✅ E2E Tests PassedBrowser: chromium All E2E tests passed successfully. Test Configuration
|
…ering - Add ngSkipHydration to header and breadcrumb components as temporary workaround - Addresses duplicate rendering issue with Angular 19 zoneless change detection + SSR hydration - TODO comments added to remove ngSkipHydration when upgrading to Angular 20 - References GitHub issue: angular/angular#50543 Signed-off-by: Asitha de Silva <asithade@gmail.com>
Summary
Update Angular, PrimeNG, and other dependencies to their latest stable versions and fix SSR hydration issues in BreadcrumbComponent and HeaderComponent.
Changes Made
Dependency Updates:
SSR Hydration Fixes:
host: { ngSkipHydration: 'true' }to BreadcrumbComponenthost: { ngSkipHydration: 'true' }to HeaderComponentDocumentation:
Benefits
Test plan
JIRA Ticket
LFXV2-242
🤖 Generated with Claude Code