Plan a Multi‑Phase Migration from zone.js to Angular 20 Signals + SignalStore Without Breaking UX

The hidden coupling to zone.js

Older apps rely on zone.js to tick views even when no explicit state was updated. When you remove zone.js, anything that doesn’t end with a signal write won’t re‑render. That’s why we plan the migration around explicit write boundaries (SignalStore) and typed adapters.

• Implicit triggers from timers, XHR, DOM events

• Third‑party libs patched by zone.js

• Async work that never writes to a signal

Why Signals + SignalStore matter in Angular 20+

Signals remove guesswork by tying reactivity to explicit writes. SignalStore lets you contain those writes in domain modules so performance, SSR, and tests stay deterministic.

• Deterministic change detection via signal writes

• Fewer template checks, more predictable perf

• Composable stores with testable methods

Metrics to capture

Set baselines so you can defend the migration. Track input latency (INP), interaction timings on complex datagrids (PrimeNG, Material), and the number of checks per interaction from Angular DevTools.

• INP, LCP, CLS (Lighthouse/CrUX)

• Angular DevTools change detection profiles

• Firebase Performance custom traces (route, store write durations)

CI gates

Tie metrics to builds so regressions are blocked. Use Nx affected builds to keep CI fast while still enforcing budgets.

• Lighthouse CI budgets

• Bundle size budgets

• Cypress happy‑path flows

• Visual diff on key dashboards

Hardening steps

OnPush plus strictness sets the stage for Signals. It reduces accidental change detection and reveals places where components mutate shared state.

• Standalone components; remove NgModules where possible

• ChangeDetectionStrategy.OnPush everywhere

• Strict TypeScript + eslint rules for immutability

• Replace shared mutable singletons with injected services

Template hygiene

Treat templates as presentations of already‑derived data. The derivation will move to computed signals later.

• Extract heavy pipes/work into computed functions

• Replace deep async chains with a view model service

• Measure hot paths with Angular DevTools

Component‑level Signals

Edge components are safe places to start. Their state isn’t shared widely, and you’ll see immediate wins in clarity and performance.

• Convert @Input() to model inputs with signals

• Move derived getters to computed()

• Replace subjects for UI state with writableSignal()

Example: PrimeNG table with computed filters

TypeScript

import { Component, computed, input, signal, WritableSignal } from '@angular/core';
import { AsyncPipe } from '@angular/common';
import { TableModule } from 'primeng/table';

export interface Order { id: string; customer: string; total: number; status: 'new'|'shipped'|'cancelled'; }

@Component({
  selector: 'orders-table',
  standalone: true,
  imports: [TableModule, AsyncPipe],
  templateUrl: './orders-table.html',
})
export class OrdersTableComponent {
  orders = input.required<Order[]>(); // signal input in Angular 20+
  statusFilter: WritableSignal<Order['status'] | 'all'> = signal('all');
  minTotal = signal(0);

  readonly filtered = computed(() => {
    const status = this.statusFilter();
    const min = this.minTotal();
    return this.orders().filter(o => (status === 'all' || o.status === status) && o.total >= min);
  });
}

HTML

<p-dropdown [options]="['all','new','shipped','cancelled']"
            [(ngModel)]="statusFilter()"
            (onChange)="statusFilter.set($event.value)"></p-dropdown>
<input type="number" [value]="minTotal()" (input)="minTotal.set($event.target.valueAsNumber)" />

<p-table [value]="filtered()" dataKey="id"></p-table>

Why SignalStore

You’ll gradually route async work (HTTP, WebSockets) through stores so the only thing that triggers rendering is a signal update.

• Explicit write boundaries via store methods

• Computed selectors without memo bugs

• Interop with RxJS via rxMethod and toSignal

SignalStore example with HTTP + error handling

import { inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { signalStore, withState, withComputed, withMethods } from '@ngrx/signals';
import { rxMethod } from '@ngrx/signals/rxjs-interop';
import { tap, switchMap, catchError, of } from 'rxjs';

interface InventoryState {
  items: ReadonlyArray<{ id: string; name: string; qty: number }>;
  loading: boolean;
  error: string | null;
}

const initialState: InventoryState = { items: [], loading: false, error: null };

export const InventoryStore = signalStore(
  { providedIn: 'root' },
  withState(initialState),
  withComputed(({ items }) => ({
    itemCount: computed(() => items().length),
  })),
  withMethods((store) => {
    const http = inject(HttpClient);

    const load = rxMethod<void>((trigger$) =>
      trigger$.pipe(
        tap(() => store.patchState({ loading: true, error: null })),
        switchMap(() =>
          http.get<InventoryState['items']>('/api/inventory').pipe(
            tap({
              next: (items) => store.patchState({ items, loading: false }),
              error: (e) => store.patchState({ error: e.message ?? 'Error', loading: false }),
            }),
            catchError(() => of([]))
          )
        )
      )
    );

    return { load };
  })
);

Adapters you’ll use

Telemetry dashboards in telecom and insurance projects used WebSockets. We kept SSR deterministic by isolating side effects, gating browser‑only streams, and updating state via signal writes.

• toSignal(observable$, { initialValue }) for reads

• fromSignal(signal) for interop

• rxMethod for typed effects

Typed WebSocket adapter

import { toSignal } from '@angular/core/rxjs-interop';
import { isPlatformBrowser } from '@angular/common';
import { inject, PLATFORM_ID, computed } from '@angular/core';

class LiveKpiService {
  private platformId = inject(PLATFORM_ID);
  private source$ = isPlatformBrowser(this.platformId) ? this.socket.messages$ : EMPTY;

  kpis = toSignal(this.source$, { initialValue: [] as ReadonlyArray<Kpi> });
  total = computed(() => this.kpis().reduce((a, k) => a + k.value, 0));
}

Create a canary build

Prove stability before removing zone.js globally. I usually spin a separate app entry in Nx so both zoneful and zoneless builds live side‑by‑side.

• Parallel app entry with zoneless provider

• Environment/remote flag (e.g., Firebase Remote Config)

• Route a subset of users/QA to the canary

Bootstrap variants

// main.ts (zoneful)
import { bootstrapApplication, provideZoneChangeDetection } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
bootstrapApplication(AppComponent, {
  providers: [provideZoneChangeDetection({ eventCoalescing: true })],
});

// main.zoneless.ts (canary)
import { bootstrapApplication } from '@angular/platform-browser';
import { provideExperimentalZonelessChangeDetection } from '@angular/core';
import { AppComponent } from './app/app.component';
bootstrapApplication(AppComponent, {
  providers: [provideExperimentalZonelessChangeDetection()],
});

# Nx targets for clarity
nx serve app        # zoneful
nx serve app-zl     # zoneless canary

What to fix first when zoneless

When in doubt, log and trace write points in SignalStore. If a view doesn’t update, you’re missing a write.

• Ensure every async path ends in a signal write (HTTP, timers, sockets, postMessage, IndexedDB).

• Replace imperative DOM mutations with state writes + template bindings.

• Audit third‑party libs that relied on zone patches; wrap callbacks to write to a signal.

Target improvements

On a telecom analytics upgrade to Angular 20, we cut change detection work ~45% and reduced long‑task bursts on filter changes by 30%—with zero downtime.

• 30–60% fewer checks per interaction (Angular DevTools)

• INP under 200ms for key flows

• Fewer flaky tests due to deterministic renders

Add CI gates

Metrics create trust with stakeholders and recruiters who ask hard questions about SSR and UX numbers.

• Lighthouse CI performance budgets

• Firebase Performance dashboards for real users

• Bundle size thresholds for canary vs main

Signals to bring in an expert

If you’re facing a production deadline and a chaotic codebase, a seasoned Angular consultant will save you weeks. I’ve stabilized vibe‑coded apps and delivered upgrades without downtime using the exact plan in this article.

• AngularJS/Angular 9–14 code with shared mutable services

• Flaky dashboards under load or streams

• High‑risk timelines (Q1 board demos, public kiosks)

Typical timeline

For complex multi‑tenant apps (RBAC, data isolation), I stand up permission‑aware selectors and SignalStore slices per tenant first to de‑risk state separation.

• Week 1: Baselines, CI gates, hot‑path audit

• Weeks 2–3: Edge Signals + initial SignalStore

• Weeks 3–4: RxJS adapters + zoneless canary

• Week 5+: Remove zone.js (post‑canary metrics)

Tooling you’ll see

Real‑time dashboards get typed event schemas, exponential retries, and data virtualization to keep frames smooth even as we re‑platform change detection.

• Angular 20, Nx, PrimeNG/Material, Cypress, Lighthouse CI

• Firebase Hosting previews + Performance Monitoring

• Highcharts/D3 where real‑time visuals matter