Angular on Latest (primary UI)

Angular is now the standard UI. We stay on the latest stable release line (current: 20.x) with a fast upgrade rhythm. This page summarizes required changes, new capabilities, and how to use them safely.

Required changes to move to latest Angular

  • Upgrade toolchain: Node 22+/24 LTS, latest Angular CLI, and update tsconfig to Angular defaults.
  • Run ng update with the official migrations; keep schematics history committed.
  • Adopt standalone components fully; remove legacy NgModules where feasible.
  • Switch to the latest router APIs and modern HttpClient interceptors.
  • Refresh linting: ESLint with Angular plugin, strict templates, strict DI.
  • Refit build to Vite-based builder (if available in this release) or latest webpack builder settings.

Improvements to leverage

  • Signals + zoneless change detection (where mature): reduce microtask churn and simplify state.
  • Standalone components: faster bootstraps and clearer boundaries; easier lazy-loading.
  • Enhanced router data/resolvers: better typing and prefetch strategies.
  • Modern build pipeline: faster HMR, improved bundle output, and better SSR/edge readiness.
  • Material latest: updated design tokens and density/theming controls.

Developer guidance & guardrails

  • Use the design-system wrapper for all UI components; never call third-party components directly.
  • Automate smoke tests: Playwright/Cypress runs on CI per upgrade; capture Core Web Vitals in lab checks.
  • Feature flags for risky changes (signals/zoneless) to allow partial rollout.
  • Keep Storybook (or equivalent) in sync with the design system to validate visual regressions.
  • Document per-release migration steps in CHANGELOG; enforce ng update dry runs before merging.