Upgrade Angular 18 → 21 and PrimeNG 17 → 21

[guardian-automation]

Summary

Migrate the Guardian frontend from Angular 18 / PrimeNG 17 to Angular 21 / PrimeNG 21. Angular 18 has reached End-of-Life and is no longer receiving security patches. This upgrade aligns the project with the current stable release, unlocks framework-level performance improvements, and resolves accumulated API debt from four major version gaps on the PrimeNG side (where v18 was a major architectural break).

Motivation

• Security: versions below Angular 19 no longer receive security patches.
• Performance: Angular 21 delivers smaller bundles and faster builds through a new tree-shaking engine, dead code elimination, and smarter parallel compilation.
• Reactivity model: Angular 21 introduces zoneless change detection as the default for new applications, with schematics to assist migrating existing projects. This significantly reduces change detection overhead.
• Testing speed: Angular 21 makes Vitest the default test runner; in large workspaces Vitest runs tests 5–10× faster than Karma, supports hot module replacement during test runs, and requires far less configuration.
• PrimeNG theming overhaul: the new @primeuix/styles / @primeuix/themes design-token architecture introduced in PrimeNG 18 means any custom themes from v17 must be rebuilt, and the sooner this is addressed the less drift accumulates.

Scope of changes

Angular (18 → 21)

• Run ng update @angular/core@21 @angular/cli@21 and work through each intermediate version's schematics (19, 20, 21).
• Consider adopting the new @if / @for / @switch control flow syntax to replace legacy *ngIf / *ngFor structural directives.

PrimeNG (17 → 21)

PrimeNG 18 was a hard architectural break; everything from 18 to 21 follows a no-breaking-change policy (with one exception in v21 noted below).

Theming (high effort)

• The styled-mode theming has been reimplemented from scratch. The old theme.css and primeng/resources no longer exist. Any custom themes from v17 or earlier must be rebuilt using the new design-token architecture.
• PrimeNG 21 uses @primeuix/styles and @primeuix/themes (v2.0.2+), which replace the old CSS variable approach.

Component renames (old module names are deprecated; imports must be updated)

• Calendar → DatePicker (primeng/calendar → primeng/datepicker), Dropdown → Select, InputSwitch → ToggleSwitch, OverlayPanel → Popover, Sidebar → Drawer.
• Several components are deprecated in favour of consolidated replacements: Chips → AutoComplete (multiple + typeahead disabled), TabMenu → Tabs (no panels), Steps → Stepper (no panels), InlineMessage / Messages → Message, TabView → Tabs, Accordion → updated with AccordionHeader / AccordionContent.

Accessibility / API

• Review all form components (InputText, Select, DatePicker, etc.) for changes in ngModel binding and reactive form integration.

Animations (v21 specific)

• Due to the deprecation of Angular's animations package in Angular v20.2, PrimeNG 21 migrates to native CSS-based animations. The showTransitionOptions and hideTransitionOptions properties are deprecated and no longer functional in v21; any animation customizations using those properties must be migrated to the new CSS-based animations API.

Acceptance criteria

• ng update reports no pending migrations.
• Application builds with no deprecation warnings related to PrimeNG component names or import paths.
• Custom theme renders correctly in both light and dark modes; no regressions in PrimeNG-heavy views (tables, dialogs, forms, overlays).
• @angular/animations package usage removed or replaced with native CSS animations.