Angular 21, Zoneless by Default: Your 30‑Day Upgrade Plan

Angular 21 shipped on November 19, 2025, and it changes how we build and tune Angular apps. New projects are zoneless by default, Vitest is the default test runner, Signal Forms arrive (still experimental), and the CLI now exposes an MCP server so AI tools can analyze and scaffold projects safely. Support follows the standard window: Angular 21 is in Active support until May 19, 2026, and LTS until May 19, 2027. (blog.ninja-squad.com)

What’s actually new in Angular 21?

Let’s separate the headline features from the myths, and call out what’s stable versus experimental.

Zoneless change detection is the default for new apps

Angular no longer ships Zone.js by default for newly generated projects. Signals and explicit triggers drive updates; if you still need legacy zone‑based behavior, you can explicitly add provideZoneChangeDetection(). The docs outline how zoneless works, what triggers change detection, and how to prepare components (OnPush helps, but isn’t strictly required). (blog.ninja-squad.com)

If your app depends on Zone.js (some third‑party libs and custom event wiring do), you can keep zones during migration—just be deliberate. The official guidance covers zone pollution, running work outside NgZone, and skipping subtrees to keep renders predictable. (angular.dev)

Vitest replaces Karma/Jasmine as the default

Angular’s CLI now defaults to Vitest for ng test. Karma remains selectable, but new apps get Vitest out of the box. The CLI’s unit‑test builder exposes runner, reporters, and a runner-config for advanced scenarios, and the testing guide reflects the Vitest‑first experience. (angular.dev)

Signal Forms (experimental)

Signal Forms provide type‑safe, signal‑driven form state with a form() API, the Field directive, and central validation. They’re powerful—but still experimental—so production teams should evaluate carefully or wait for stabilization. (angular.dev)

HttpClient defaults and small QoL changes

In 21, HttpClient is provided in the root injector by default for new projects, reducing boilerplate (provideHttpClient() is still how you enable fetch or interceptors). Community and training sources corroborate this change, though the API docs still focus on configuration examples. Treat it as “available by default, configured explicitly when customizing.” (angular.schule)

Also noteworthy: router scroll options small improvements, and typed SimpleChanges for safer ngOnChanges code. (blog.ninja-squad.com)

MCP server in the CLI

The CLI includes an experimental MCP server so AI assistants (Copilot, Cursor, JetBrains AI, etc.) can query your workspace safely, with read‑only toggles and tools like an onpush_zoneless_migration plan. Keep it read‑only in CI and shared repos. (angular.dev)

Why “zoneless by default” matters

Zoneless removes the implicit magic that patched async APIs and ran change detection everywhere. Now, updates happen when inputs change, async pipes emit, signals update, or you manually call markForCheck(). That cuts redundant checks, simplifies debugging, and aligns Angular with explicit reactivity models the industry prefers. (angular.dev)

But there’s a catch: old patterns that relied on Zone.js to “just update” won’t. Subscribe to observables in templates with async, not only in services. Rework ad‑hoc DOM listeners so they trigger recognized change signals or run outside Angular. (angular.dev)

Angular 21: prerequisites and versions

Check your toolchain before touching app code. Angular 21 supports Node.js ^20.19.0, ^22.12.0, or ^24.0.0, and TypeScript 5.9.x. If you’re under Node 20.19, plan an NVM step first. (angular.dev)

As of December 17, 2025, the latest 21 patch was 21.0.6, with a weekly cadence of fixes. There was also an XSRF token leak fixed quickly in 21.0.1—so don’t stop at 21.0.0. Upgrade to at least 21.0.6 (or the latest patch when you read this). (versionlog.com)

Upgrade playbook: 30 days to Angular 21

Here’s a plan I’ve run on real codebases, scaled up or down based on app size. Timebox each week; treat risk like you would a production incident—measure, patch, and verify.

Week 1: Inventory and baselines

• Create an “upgrade branch” and freeze non‑critical feature merges.
• Capture perf and stability baselines: Lighthouse CWV, bundle size, test runtime, error rates.
• Audit for Zone.js assumptions: global event listeners, manual subscriptions in services, ngDoCheck, and non‑OnPush islands. Mark each as “template async,” “signal,” or “manual markForCheck.” (angular.dev)

• Check Node/TS/RxJS versions against Angular 21’s compatibility table.
• If you use SSR/hydration, note any custom DOM manipulation and hydration constraints. (angular.dev)

Week 2: Framework and test runner

• Run ng update @angular/core@21 @angular/cli@21. Fix peer deps and lint warnings.
• Switch tests to Vitest where feasible. Angular’s builder defaults to Vitest; Karma is still available, but migrating yields faster feedback loops. Keep browser mode for critical UI tests if needed. (angular.dev)

• If you migrate from Jasmine: update tsconfig.spec.json types, configure DOM emulation (jsdom or happy-dom), and watch for suite‑level setup relying on Karma plugins. (angular.dev)

Week 3: Zoneless readiness and rollout

• For new apps, you’re already zoneless. For existing apps, decide: flip to zoneless now or keep zones during transition. Add provideZoneChangeDetection() only if you must. (blog.ninja-squad.com)

• Make components OnPush‑compatible where reasonable and ensure change notifications travel via inputs, signals, or AsyncPipe. Run Angular DevTools to spot wasted change detection and zone pollution. (angular.dev)

• SSR teams: confirm hydration/incremental hydration still behave with defer blocks above the fold; use withIncrementalHydration() if applicable. (angular.dev)

Week 4: Forms strategy and AI tooling

• Decide your forms strategy per route or feature module: stay on reactive forms for now, or pilot Signal Forms in a small, low‑risk surface (e.g., an account settings page). Document validator parity and any custom controls work. (angular.dev)

• Enable the Angular CLI MCP server in read‑only mode for your team’s IDEs so agents can answer “how to migrate X to OnPush/zoneless” or scaffold utilities without writing to disk. Keep it disabled in CI. (angular.dev)

Zoneless readiness checklist (print this)

• Replace service‑only subscriptions with template | async where UI is affected.
• For stateful UIs, prefer signals; compute derived state with computed signals; trigger UI updates via signal writes rather than side‑effects.
• Adopt ChangeDetectionStrategy.OnPush for leaf and medium‑level components to reduce accidental global checks.
• Wrap third‑party charting/maps initialization with ngZone.runOutsideAngular() to avoid spurious cycles. (angular.dev)
• Add explicit markForCheck() when writing to non‑reactive sources that must trigger a repaint. (angular.dev)

People also ask

Do I have to migrate all tests to Vitest now?

No. The CLI defaults to Vitest for new apps, but you can keep Karma temporarily. I recommend moving unit tests first and leaving a small number of browser‑mode tests for complex UI behaviors. (angular.dev)

Is Signal Forms ready for production?

It’s labeled experimental. If your team can tolerate churn, pilot it in isolated flows; otherwise, stick to reactive forms and revisit next minor. The docs clearly mark the status and APIs. (angular.dev)

What Node.js version does Angular 21 require?

Node ^20.19.0, ^22.12.0, or ^24.0.0. Lock it with NVM across your team to avoid “works on my machine” CI surprises. (angular.dev)

Any security issues I should patch right away?

Yes—patch to at least 21.0.1 to address an XSRF token leak via protocol‑relative URLs, and in practice go to the latest 21.0.x (e.g., 21.0.6 as of December 17, 2025). (github.com)

Practical code moves that pay off fast

• Stop importing Zone.js in polyfills for new apps; remove it when you fully migrate.
• Replace imperative “subscribe+setState” with template async pipes; where you need imperative control, use signals.
• If you relied on provideHttpClient() only to “turn on HTTP,” you can remove it; keep it if you need withFetch() or interceptors. (angular.dev)

• For SSR, enable hydration and—if it makes sense—incremental hydration for above‑the‑fold defer blocks to lower LCP without jank. (angular.dev)

What to do next (lead dev or owner)

• Book a one‑hour readiness review: inventory zones, third‑party libs, SSR, and forms usage.
• Upgrade toolchain to compatible Node/TS; pin with .nvmrc and CI images. (angular.dev)
• Run ng update, switch to Vitest, and set up a zoneless pilot area.
• Patch to latest 21.0.x to cover early 21.0.0 issues (XSRF leak). (github.com)
• Decide your forms path: stick with reactive forms broadly, pilot Signal Forms narrowly.

Need a partner for the upgrade?

If you want a second set of eyes on migration risks, our team has moved large Angular apps across major versions while keeping KPIs green. See what we build on the work we’ve shipped, how we approach upgrades on what we do, and the service lineup on our services page. Want a scoped plan and a fixed bid? Check transparent pricing and get in touch.

And if you’re adopting a stricter patch discipline in 2026, this mindset helps: patch fast, verify, and stay patched. Our quick-read playbook applies just as well to frontend frameworks as it does to hot CVEs—start with a tight feedback loop and prove each change. 72‑hour patch‑and‑prove is a solid model.

Final takeaway

Angular 21 pushes the framework toward explicit, signal‑driven updates and faster feedback loops. You don’t have to go all‑in on day one: keep zones where you must, migrate tests incrementally, and pilot Signal Forms. But don’t linger on 21.0.0—patch up, measure, and ship. That’s how you get the performance wins without surprises.