Reto Ryter

Current Angular version and the showcase feature set

Ticket 03researchresolvedBlockiert durch: –Dieses Ticket ist auf Englisch.

← Zurück zur Karte

Question

As of today, what is the current stable Angular version (22.2.x was seen on npm), what is the recommended way to produce a fully prerendered static site with the Angular CLI (application builder, SSR with prerender routes, no server at runtime), and which modern features are worth showcasing visibly in a small personal site: zoneless, signals and signal forms, deferrable views, incremental hydration, the resource API, control flow. Also: what is the right way to host a three.js canvas component inside a prerendered Angular page (client-only rendering, afterNextRender, dynamic import), and any known pitfalls with the neon sign component's approach. Primary sources: angular.dev, the Angular GitHub releases, the CLI docs. The finding should be concrete enough that the stack ticket can be decided from it without further reading.

Answer

Resolved 2026-10-14 by a research subagent. Findings: branch research/angular-current-setup, file research/angular-current-setup.md. Worktree at ~/Projects/rryter.ch-research-angular. Caveat: blog.angular.dev blocks automated fetches, so stability claims come from angular.dev (events/v22, roadmap) and the CHANGELOG.

  • Version: Angular 22.2.2 is latest (published 2026-10-08). Angular is on a 12-month major cadence: v22.3 around Nov 2026, v23 around June 2027. TypeScript 6.0, Node 22.22+/24/26.
  • Scaffold: ng new rryter-ch --ssr --zoneless --style=css --test-runner=vitest; zoneless, Vitest, standalone, strict and the 2025 file naming are defaults. Then set "outputMode": "static" in angular.json and delete the ssr block and src/server.ts.
  • Prerender: app.routes.server.ts with { path: '**', renderMode: RenderMode.Prerender }; unparameterised routes are discovered automatically. RenderMode.Server is a build error in static mode.
  • Output: deploy dist/rryter-ch/browser/ (one <route>/index.html per route, index.csr.html shell, prerendered-routes.json). Nothing runs at request time, so hosting stays an open choice.
  • Stable and worth showing: signals, resource()/httpResource() (stable in v22), Signal Forms (@angular/forms/signals, stable in v22), control flow, @defer, incremental hydration (default with provideClientHydration() in v22). Zoneless default since v21, OnPush default since v22 (mention in a "built with" line). @boundary is developer preview in v22.2; no selectorless authoring format has shipped.
  • three.js inside a prerendered page: keep the neon-sign component as is (afterNextRender + dynamic import() never runs at prerender time, static template so no hydration mismatch). Host it as @defer (hydrate on viewport) { <twy-neon-sign/> } @placeholder { <img poster> } so the poster is in the prerendered HTML and three.js stays lazy.
  • Pitfalls: stacking context for the z-index:-1 canvas; canvas background must equal the page colour (opaque canvas with 50 % bleed); keep the destroyed guard around the async import; no platform checks in templates; headless Chromium may lack WebGL in e2e (--use-gl=angle --use-angle=swiftshader, or assert on the poster path).
  • Tests: Vitest + jsdom via @angular/build:unit-test (default). E2E: plain @playwright/test serving dist/rryter-ch/browser to test the real prerendered output.
  • Sign dependencies: [email protected], @types/[email protected]; copy angular/twy-neon-sign/* into the app and both posters into public/.

← Zurück zur Karte