Migrate Angular example to Angular 22 and angular-oauth2-oidc 22

[Wictorgirardi]

Depends on #28: this branch includes its commit, so review the last commit only until #28 is merged.

Summary

• Toolchain: re-scaffolded with ng new from Angular CLI 22.2 (standalone, zoneless, @angular/build application builder, Vitest unit tests), plus angular-eslint 22.5 with ESLint 10.
  • Angular 21.1 → 22.2, TypeScript 6.0.
  • zone.js, Karma/Jasmine, @angular-devkit/build-angular, @angular/animations and platform-browser-dynamic are removed.
• Tailwind CSS 4: now actually configured, through .postcssrc.json and @tailwindcss/postcss. Before, v4 was installed but set up the v3 way: the builder ignored postcss.config.js and loaded the v3 plugin.
• Install fixed: CI's npm install failed on a jasmine-core peer conflict. The stale package-lock.json (Angular 18) is gone; the example uses pnpm 10.34 (packageManager) and Node 24.
• Auth library: angular-oauth2-oidc 20 → 22.
  • OAuth is configured in provideAppInitializer, instead of a component constructor that didn't await discovery.
  • A signals-based AuthService exposes the login state and the decoded tokens.
  • Templates use @if, inject() and real <button>s.
  • Discovery errors are shown instead of breaking the bootstrap.
• Auth config:
  • Comes from the environment files: production uses the hosted demo realm, ng serve uses the local Keycloak from Add shared CI workflows, local Keycloak and contributing guide #28.
  • The redirect and post-logout URIs are the app origin instead of /index.html.
  • The offline_access scope (offline tokens) and showDebugInformation are removed.
• UI: the shared layout with inline SVG icons (the three SVG files are gone), the className React-ism fixed, and the GitHub link now points to this example.
• Tests: two working specs replace the broken ones; the old NullInjectorError and missing <h1> issues are gone.
• Deploy: vercel.json pins the Angular preset and output directory. The workflow calls the shared CI and deploy workflows.

Test plan

• pnpm install --frozen-lockfile && pnpm lint && pnpm test && pnpm build pass on Node 24; 3 tests pass.
• tools/e2e-smoke passes against the local Keycloak on port 4200.
• Reloading keeps the session, logout ends the Keycloak session, and there are no page errors.
• Vercel preview deploy. It's skipped for PRs from forks, so it first runs after merge.

Docs drift

blog/2024-08-01-secure-angular.mdx and templates/frameworks/_angular.mdx (L9–93):

• The authCodeFlowConfig snippet (/index.html redirect, offline_access, debug) → src/app/auth/auth.config.ts plus the environment files.
• Constructor-based setup in the user component → provideAppInitializer and AuthService.
• *ngIf → @if.
• user.component.ts → user-status/user-status.ts, following the Angular 20+ file naming.

[Wictorgirardi]

Combined into #44 with the other SPA examples. The changes are the same; only the commit SHAs differ.