chore(LFXV2-242): update dependencies and fix SSR hydration issues (#35)

* chore(LFXV2-242): update dependencies and fix SSR hydration issues

- 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>

* fix: add ngSkipHydration to resolve zoneless hydration duplicate rendering

- 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>

---------

Signed-off-by: Asitha de Silva <asithade@gmail.com>

Author: asithade

CLAUDE.md

@@ -112,3 +112,5 @@ lfx-pcc-v3/
 - **Use data-testid naming convention** - `[section]-[component]-[element]` for hierarchical structure
 - **Test responsive behavior** - validate mobile, tablet, and desktop viewports appropriately
 - When running tests to validate UI tests, use reporter=list
+
+- 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.

apps/lfx-pcc/package.json

@@ -18,60 +18,60 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^19.2.0",
-    "@angular/cdk": "^19.2.0",
-    "@angular/common": "^19.2.0",
-    "@angular/compiler": "^19.2.0",
-    "@angular/core": "^19.2.0",
-    "@angular/forms": "^19.2.0",
-    "@angular/platform-browser": "^19.2.0",
-    "@angular/platform-browser-dynamic": "^19.2.0",
-    "@angular/platform-server": "^19.2.0",
-    "@angular/router": "^19.2.0",
-    "@angular/ssr": "^19.2.11",
-    "@fullcalendar/angular": "^6.1.18",
-    "@fullcalendar/core": "^6.1.18",
-    "@fullcalendar/daygrid": "^6.1.18",
-    "@fullcalendar/timegrid": "^6.1.18",
+    "@angular/animations": "^19.2.14",
+    "@angular/cdk": "^19.2.19",
+    "@angular/common": "^19.2.14",
+    "@angular/compiler": "^19.2.14",
+    "@angular/core": "^19.2.14",
+    "@angular/forms": "^19.2.14",
+    "@angular/platform-browser": "^19.2.14",
+    "@angular/platform-browser-dynamic": "^19.2.14",
+    "@angular/platform-server": "^19.2.14",
+    "@angular/router": "^19.2.14",
+    "@angular/ssr": "^19.2.15",
+    "@fullcalendar/angular": "^6.1.19",
+    "@fullcalendar/core": "^6.1.19",
+    "@fullcalendar/daygrid": "^6.1.19",
+    "@fullcalendar/timegrid": "^6.1.19",
     "@lfx-pcc/shared": "workspace:*",
-    "@linuxfoundation/lfx-ui-core": "^0.0.19",
-    "@primeng/themes": "^19.1.3",
-    "dotenv": "^17.2.0",
+    "@linuxfoundation/lfx-ui-core": "^0.0.20",
+    "@primeng/themes": "^19.1.4",
+    "dotenv": "^17.2.1",
     "express": "^4.18.2",
-    "express-openid-connect": "^2.18.1",
+    "express-openid-connect": "^2.19.2",
     "ngx-cookie-service-ssr": "^19.1.2",
     "pino-http": "^10.5.0",
-    "primeng": "^19.1.3",
-    "rxjs": "~7.8.0",
-    "tslib": "^2.3.0"
+    "primeng": "^19.1.4",
+    "rxjs": "~7.8.2",
+    "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^19.2.11",
-    "@angular-eslint/eslint-plugin": "^v19.8.1",
-    "@angular-eslint/eslint-plugin-template": "^v19.8.1",
-    "@angular-eslint/template-parser": "^v19.8.1",
-    "@angular/cli": "^19.2.11",
-    "@angular/compiler-cli": "^19.2.0",
-    "@eslint/compat": "^1.3.1",
+    "@angular-devkit/build-angular": "^19.2.15",
+    "@angular-eslint/eslint-plugin": "^19.8.1",
+    "@angular-eslint/eslint-plugin-template": "^19.8.1",
+    "@angular-eslint/template-parser": "^19.8.1",
+    "@angular/cli": "^19.2.15",
+    "@angular/compiler-cli": "^19.2.14",
+    "@eslint/compat": "^1.3.2",
     "@eslint/eslintrc": "^3.3.1",
-    "@eslint/js": "^9.31.0",
-    "@playwright/test": "^1.54.1",
+    "@eslint/js": "^9.33.0",
+    "@playwright/test": "^1.54.2",
     "@types/express": "^4.17.17",
     "@types/node": "^18.18.0",
-    "@typescript-eslint/eslint-plugin": "^8.37.0",
-    "@typescript-eslint/parser": "^8.37.0",
-    "@typescript-eslint/type-utils": "^8.37.0",
-    "@typescript-eslint/types": "^8.37.0",
-    "@typescript-eslint/utils": "^8.37.0",
+    "@typescript-eslint/eslint-plugin": "^8.39.1",
+    "@typescript-eslint/parser": "^8.39.1",
+    "@typescript-eslint/type-utils": "^8.39.1",
+    "@typescript-eslint/types": "^8.39.1",
+    "@typescript-eslint/utils": "^8.39.1",
     "autoprefixer": "^10.4.21",
-    "eslint": "^9.30.1",
+    "eslint": "^9.33.0",
     "eslint-plugin-import": "^2.32.0",
-    "playwright": "^1.54.1",
+    "playwright": "^1.54.2",
     "postcss": "^8.5.6",
     "prettier": "^3.6.2",
-    "prettier-plugin-organize-imports": "^4.1.0",
+    "prettier-plugin-organize-imports": "^4.2.0",
     "prettier-plugin-tailwindcss": "^0.6.14",
-    "tailwindcss": "^3",
+    "tailwindcss": "^3.4.17",
     "tailwindcss-primeui": "^0.6.1",
     "typescript": "~5.7.2"
   }

apps/lfx-pcc/src/app/shared/components/breadcrumb/breadcrumb.component.ts

@@ -12,6 +12,9 @@ import { BreadcrumbItemClickEvent, BreadcrumbModule } from 'primeng/breadcrumb';
   standalone: true,
   imports: [CommonModule, RouterModule, BreadcrumbModule],
   templateUrl: './breadcrumb.component.html',
+  // TODO: Remove ngSkipHydration when upgrading to Angular 20 - zoneless hydration compatibility
+  // https://github.com/angular/angular/issues/50543
+  host: { ngSkipHydration: 'true' },
 })
 export class BreadcrumbComponent {
   @ContentChild('item', { static: false, descendants: false }) public itemTemplate?: TemplateRef<any>;

apps/lfx-pcc/src/app/shared/components/header/header.component.ts

@@ -22,6 +22,9 @@ import { MenuComponent } from '../menu/menu.component';
   templateUrl: './header.component.html',
   styleUrl: './header.component.scss',
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  // TODO: Remove ngSkipHydration when upgrading to Angular 20 - zoneless hydration compatibility
+  // https://github.com/angular/angular/issues/50543
+  host: { ngSkipHydration: 'true' },
 })
 export class HeaderComponent {
   private readonly router = inject(Router);

package.json

@@ -25,19 +25,19 @@
     "prepare": "husky"
   },
   "devDependencies": {
-    "@linuxfoundation/lfx-ui-core": "^0.0.19",
-    "@types/node": "^24.0.14",
-    "@typescript-eslint/eslint-plugin": "^8.37.0",
-    "@typescript-eslint/parser": "^8.37.0",
-    "@typescript-eslint/type-utils": "^8.37.0",
-    "@typescript-eslint/types": "^8.37.0",
-    "@typescript-eslint/utils": "^8.37.0",
+    "@linuxfoundation/lfx-ui-core": "^0.0.20",
+    "@types/node": "^24.2.1",
+    "@typescript-eslint/eslint-plugin": "^8.39.1",
+    "@typescript-eslint/parser": "^8.39.1",
+    "@typescript-eslint/type-utils": "^8.39.1",
+    "@typescript-eslint/types": "^8.39.1",
+    "@typescript-eslint/utils": "^8.39.1",
     "husky": "^9.1.7",
-    "lint-staged": "^16.1.2",
+    "lint-staged": "^16.1.5",
     "prettier": "^3.6.2",
     "pretty-quick": "^4.2.2",
     "tslib": "^2.8.1",
-    "turbo": "^2.5.4",
+    "turbo": "^2.5.5",
     "typescript": "5.8.3"
   },
   "engines": {

packages/shared/package.json

@@ -41,6 +41,6 @@
     "typescript": "5.8.3"
   },
   "dependencies": {
-    "@fullcalendar/core": "^6.1.18"
+    "@fullcalendar/core": "^6.1.19"
   }
 }