Angular Standard¶

v1.0 — 2026-06-06 — applies to Reporting.UI, KIPS, ArtLiftService.UI and new Angular apps.

Versions & stack¶

Floor for active development: Angular 20. ArtLiftService.UI (v17) upgrades at next milestone; PropertyTaxManagement.UI.2.0 (v13) is frozen legacy.
DECISION: New apps use PrimeNG + TailwindCSS v4 (the Reporting.UI/KIPS direction). Material remains only in existing apps.
Tailwind v4 is CSS-first (@import "tailwindcss", @theme) — no tailwind.config.js in new projects.

The angular.dev style guide was rewritten — old conventions are legacy. For all NEW code:

Standalone components only; no NgModules.
No type suffixes: user-profile.ts / class UserProfile — not user-profile.component.ts / UserProfileComponent. Existing code keeps its names; don't mass-rename.
inject() instead of constructor injection.
Signals for local synchronous state; computed() instead of complex template logic; signal-based input()/output()/model() marked readonly.
RxJS for async streams. toPromise() is removed in RxJS 8 — use firstValueFrom/lastValueFrom (ArtLiftService.UI and Reporting.UI contain toPromise() calls; migrate when touched).
Organize by feature area, not by type (features/invoicing/, not components/ + services/).
Functional guards/interceptors/resolvers (class-based deprecated).
Native class/style bindings over NgClass/NgStyle. Handlers named for what they do (saveUser(), not handleClick()).

Bundle budgets enforced in CI: Angular's built-in budgets in angular.json (initial bundle + per-component styles) tuned per app and failing the production build on regression — the coverage-gate philosophy applied to bytes.
Core Web Vitals targets at p75: LCP < 2.5 s, INP < 200 ms, CLS < 0.1.
JS discipline: lazy-loaded routes by default; @defer for below-the-fold and heavy widgets (charts, maps); import-on-interaction for expensive third-party components.
Images: NgOptimizedImage with explicit dimensions; AVIF/WebP formats.

2-space indent, LF, single quotes, Prettier default printWidth 80 (ratified — frontend does NOT follow the C# 180 rule) — Prettier formats, angular-eslint lints; both run in CI (prettier --check, ng lint).
TypeScript strict: true. No any in new code — use unknown + narrowing or proper types.
GraphQL via Apollo Angular with generated types (codegen) — no hand-written response interfaces.