build(angular): upgrade to angular 20 with primeng v20 (#206)

* build(angular): upgrade to angular 20 and fix ssr authentication

LFXV2-900

## Angular 20 Upgrade Changes
- Updated @angular/ssr to 20.3.13
- Migrated from provideServerRouting to provideServerRendering(withRoutes())
- Updated @angular/forms peer dependency in shared package to ^20.3.15
- Updated component imports to use provideAnimationsAsync

## SSR Authentication Fix
- Changed Express middleware default SSR auth from 'optional' to 'required'
- Simplified auth guard to trust Express middleware during SSR
- Express now redirects unauthenticated users before Angular SSR runs
- Prevents protected content from being visible during SSR

## Files Changed
- apps/lfx-one/src/server/middleware/auth.middleware.ts
- apps/lfx-one/src/app/shared/guards/auth.guard.ts
- apps/lfx-one/src/app/app.config.server.ts
- apps/lfx-one/package.json
- packages/shared/package.json

Generated with [Claude Code](https://claude.ai/code)

Signed-off-by: Asitha de Silva <[email protected]>

* build(deps): upgrade primeng to v20 with component api updates

LFXV2-900

- Upgrade primeng from ^19.1.4 to ^20.4.0
- Migrate @primeng/themes to @primeuix/themes (^2.0.2)
- Update @linuxfoundation/lfx-ui-core to ^0.1.0
- Remove deprecated properties (badgeClass, transition options)
- Update severity mappings (primary -> contrast for messages)
- Adjust component templates for PrimeNG v20 API changes
- Fix tag severity mapping for compatibility

Signed-off-by: Asitha de Silva <[email protected]>

* refactor(angular): replace CommonModule with specific imports

Remove CommonModule imports and replace with specific directives and
pipes (NgClass, DatePipe, TitleCasePipe) as required by each component.
This follows Angular 19+ best practices for standalone components with
built-in control flow syntax (@if, @for, @switch).

🤖 Generated with [Claude Code](https://claude.ai/code)

Signed-off-by: Asitha de Silva <[email protected]>

---------

Signed-off-by: Asitha de Silva <[email protected]>

Author: asithade

apps/lfx-one/angular.json

@@ -162,22 +162,6 @@
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n"
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "polyfills": ["zone.js", "zone.js/testing"],
-            "tsConfig": "tsconfig.spec.json",
-            "inlineStyleLanguage": "scss",
-            "assets": [
-              {
-                "glob": "**/*",
-                "input": "public"
-              }
-            ],
-            "styles": ["src/styles.scss"],
-            "scripts": []
-          }
         }
       }
     }

apps/lfx-one/package.json

@@ -23,27 +23,27 @@
   },
   "private": true,
   "dependencies": {
-    "@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",
+    "@angular/animations": "^20.3.15",
+    "@angular/cdk": "^20.2.14",
+    "@angular/common": "^20.3.15",
+    "@angular/compiler": "^20.3.15",
+    "@angular/core": "^20.3.15",
+    "@angular/forms": "^20.3.15",
+    "@angular/platform-browser": "^20.3.15",
+    "@angular/platform-browser-dynamic": "^20.3.15",
+    "@angular/platform-server": "^20.3.15",
+    "@angular/router": "^20.3.15",
+    "@angular/ssr": "^20.3.13",
     "@fullcalendar/angular": "^6.1.19",
     "@fullcalendar/core": "^6.1.19",
     "@fullcalendar/daygrid": "^6.1.19",
     "@fullcalendar/timegrid": "^6.1.19",
     "@lfx-one/shared": "workspace:*",
-    "@linuxfoundation/lfx-ui-core": "^0.0.21",
+    "@linuxfoundation/lfx-ui-core": "^0.1.0",
     "@openfeature/core": "^1.9.1",
     "@openfeature/launchdarkly-client-provider": "^0.3.3",
     "@openfeature/web-sdk": "^1.7.1",
-    "@primeng/themes": "^19.1.4",
+    "@primeuix/themes": "^2.0.2",
     "compression": "^1.8.1",
     "dotenv": "^17.2.1",
     "express": "^4.18.2",
@@ -52,18 +52,18 @@
     "nats": "^2.29.3",
     "ngx-cookie-service-ssr": "^19.1.2",
     "pino-http": "^10.5.0",
-    "primeng": "^19.1.4",
+    "primeng": "^20.4.0",
     "rxjs": "~7.8.2",
     "snowflake-sdk": "^2.3.1",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^19.2.15",
+    "@angular-devkit/build-angular": "^20.3.8",
     "@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",
+    "@angular/cli": "^20.3.13",
+    "@angular/compiler-cli": "^20.3.15",
     "@eslint/compat": "^1.3.2",
     "@eslint/eslintrc": "^3.3.1",
     "@eslint/js": "^9.33.0",
@@ -88,6 +88,6 @@
     "prettier-plugin-tailwindcss": "^0.6.14",
     "tailwindcss": "^3.4.17",
     "tailwindcss-primeui": "^0.6.1",
-    "typescript": "~5.7.2"
+    "typescript": "~5.9.3"
   }
 }

apps/lfx-one/src/app/app.component.ts

@@ -1,7 +1,6 @@
 // Copyright The Linux Foundation and each contributor to LFX.
 // SPDX-License-Identifier: MIT
 
-import { CommonModule } from '@angular/common';
 import { Component, inject, makeStateKey, REQUEST_CONTEXT, TransferState } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { AuthContext } from '@lfx-one/shared/interfaces';
@@ -15,7 +14,7 @@ import { UserService } from './shared/services/user.service';
 
 @Component({
   selector: 'lfx-root',
-  imports: [RouterOutlet, CommonModule, ToastModule],
+  imports: [RouterOutlet, ToastModule],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
 })

apps/lfx-one/src/app/app.config.server.ts

@@ -2,14 +2,13 @@
 // SPDX-License-Identifier: MIT
 
 import { ApplicationConfig, mergeApplicationConfig } from '@angular/core';
-import { provideServerRendering } from '@angular/platform-server';
-import { provideServerRouting } from '@angular/ssr';
+import { provideServerRendering, withRoutes } from '@angular/ssr';
 
 import { appConfig } from './app.config';
 import { serverRoutes } from './app.routes.server';
 
 const serverConfig: ApplicationConfig = {
-  providers: [provideServerRendering(), provideServerRouting(serverRoutes)],
+  providers: [provideServerRendering(withRoutes(serverRoutes))],
 };
 
 export const config = mergeApplicationConfig(appConfig, serverConfig);

apps/lfx-one/src/app/app.config.ts

@@ -2,13 +2,13 @@
 // SPDX-License-Identifier: MIT
 
 import { provideHttpClient, withFetch, withInterceptors } from '@angular/common/http';
-import { ApplicationConfig, provideExperimentalZonelessChangeDetection } from '@angular/core';
+import { ApplicationConfig, provideZonelessChangeDetection } from '@angular/core';
 import { provideClientHydration, withEventReplay, withHttpTransferCacheOptions, withIncrementalHydration } from '@angular/platform-browser';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 import { provideRouter, withInMemoryScrolling, withPreloading } from '@angular/router';
 import { lfxPreset } from '@linuxfoundation/lfx-ui-core';
-import { definePreset } from '@primeng/themes';
-import Aura from '@primeng/themes/aura';
+import { definePreset } from '@primeuix/themes';
+import Aura from '@primeuix/themes/aura';
 import { authenticationInterceptor } from '@shared/interceptors/authentication.interceptor';
 import { ConfirmationService, MessageService } from 'primeng/api';
 import { providePrimeNG } from 'primeng/config';
@@ -23,12 +23,12 @@ const customPreset = definePreset(Aura, {
   semantic: lfxPreset.semantic,
   components: {
     ...lfxPreset.component,
-  },
+  } as any,
 });
 
 export const appConfig: ApplicationConfig = {
   providers: [
-    provideExperimentalZonelessChangeDetection(),
+    provideZonelessChangeDetection(),
     provideRouter(routes, withPreloading(CustomPreloadingStrategy), withInMemoryScrolling({ scrollPositionRestoration: 'top' })),
     provideClientHydration(withEventReplay(), withIncrementalHydration(), withHttpTransferCacheOptions({ includeHeaders: ['Authorization'] })),
     provideHttpClient(withFetch(), withInterceptors([authenticationInterceptor])),

apps/lfx-one/src/app/layouts/main-layout/main-layout.component.ts

@@ -1,7 +1,6 @@
 // Copyright The Linux Foundation and each contributor to LFX.
 // SPDX-License-Identifier: MIT
 
-import { CommonModule } from '@angular/common';
 import { Component, computed, CUSTOM_ELEMENTS_SCHEMA, inject } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NavigationEnd, Router, RouterModule } from '@angular/router';
@@ -17,8 +16,7 @@ import { filter } from 'rxjs';
 
 @Component({
   selector: 'lfx-main-layout',
-  standalone: true,
-  imports: [CommonModule, RouterModule, SidebarComponent, DrawerModule],
+  imports: [RouterModule, SidebarComponent, DrawerModule],
   templateUrl: './main-layout.component.html',
   styleUrl: './main-layout.component.scss',
   schemas: [CUSTOM_ELEMENTS_SCHEMA],

apps/lfx-one/src/app/layouts/project-layout/project-layout.component.ts

@@ -1,7 +1,6 @@
 // Copyright The Linux Foundation and each contributor to LFX.
 // SPDX-License-Identifier: MIT
 
-import { CommonModule } from '@angular/common';
 import { Component, computed, inject, input, Signal, signal } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { ActivatedRoute, RouterModule } from '@angular/router';
@@ -14,8 +13,7 @@ import { of, switchMap } from 'rxjs';
 
 @Component({
   selector: 'lfx-project-layout',
-  standalone: true,
-  imports: [CommonModule, RouterModule, HeaderComponent, ChipModule],
+  imports: [RouterModule, HeaderComponent, ChipModule],
   templateUrl: './project-layout.component.html',
   styleUrl: './project-layout.component.scss',
 })

apps/lfx-one/src/app/modules/committees/committee-dashboard/committee-dashboard.component.html

@@ -19,7 +19,7 @@ <h1>{{ committeeLabelPlural }}</h1>
             <lfx-button
               [label]="'Create ' + committeeLabel"
               icon="fa-light fa-users mr-1"
-              severity="primary"
+              severity="info"
               size="small"
               (onClick)="openCreateDialog()"
               data-testid="committee-new-cta">

apps/lfx-one/src/app/modules/committees/committee-dashboard/committee-dashboard.component.ts

@@ -1,7 +1,6 @@
 // Copyright The Linux Foundation and each contributor to LFX.
 // SPDX-License-Identifier: MIT
 
-import { CommonModule } from '@angular/common';
 import { Component, computed, inject, signal, Signal, WritableSignal } from '@angular/core';
 import { toObservable, toSignal } from '@angular/core/rxjs-interop';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
@@ -22,8 +21,7 @@ import { CommitteeTableComponent } from '../components/committee-table/committee
 
 @Component({
   selector: 'lfx-committee-dashboard',
-  standalone: true,
-  imports: [CommonModule, ReactiveFormsModule, InputTextComponent, SelectComponent, ButtonComponent, CommitteeTableComponent],
+  imports: [ReactiveFormsModule, InputTextComponent, SelectComponent, ButtonComponent, CommitteeTableComponent],
   templateUrl: './committee-dashboard.component.html',
   styleUrl: './committee-dashboard.component.scss',
 })

apps/lfx-one/src/app/modules/committees/committee-manage/committee-manage.component.html

@@ -88,7 +88,6 @@ <h1 data-testid="committee-manage-title">
             label="Previous"
             icon="fa-light fa-arrow-left"
             severity="secondary"
-            [outlined]="true"
             size="small"
             [disabled]="isFirstStep()"
             (onClick)="previousStep()"
@@ -104,7 +103,6 @@ <h1 data-testid="committee-manage-title">
             <lfx-button
               [label]="isLastStep() ? 'Skip For Now' : 'Cancel'"
               severity="secondary"
-              [outlined]="true"
               size="small"
               (onClick)="onCancel()"
               data-testid="committee-manage-cancel-btn">