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

The scene

It’s Monday. Your real‑time analytics board (telecom ad spend, 30k events/min) jitters less after early Signals refactors. Product smiles. Then you flip zoneless in a staging build—some widgets don’t update. Why? Imperative change‑detection hacks and third‑party assumptions about zone.js.

2025 context

As teams plan 2025 Angular roadmaps, zoneless + Signals is the biggest maintainability and performance unlock I’m seeing across dashboards, kiosks, and multi‑tenant portals. But you must phase it.

• Angular 20+ makes zoneless stable and first‑class.

• Hiring cycles pick up in Q1—leadership asks for hard numbers.

Imperative patches

Those work under zone.js because the microtask queue frequently nudges views. Zoneless removes that crutch; now only signals advance the UI.

• ChangeDetectorRef.detectChanges sprinkled in services/components

• NgZone.run used as a catch‑all for async callbacks

Third‑party assumptions

Libraries like PrimeNG are largely fine; the issues are almost always our in‑house wrappers that mutated inputs instead of emitting signals.

• Legacy wrappers around Datepickers/Charts that call markForCheck

• Direct mutation of Input objects (without a signal boundary)

Mixed async sources

Zoneless expects side effects to be modeled as effects and state changes to come through signals/SignalStore. When arrays are mutated in place, computed signals never re‑run.

• RxJS streams not bridged into signals

• WebSocket burst handlers mutating arrays in place

Phase 0: Instrument and freeze the blast radius

Before touching code, measure. I log DevTools cycles while replaying telemetry via a script, then pin thresholds in CI.

• Baseline Angular DevTools change‑detection cycles on key routes

• Capture Core Web Vitals (LCP/INP/CLS) with GA4 or Firebase Analytics

• Add feature flag for zoneless builds

Phase 1: Signals under zone.js (no UX risk)

This builds the muscle without changing global detection. Most apps see 15–30% fewer view updates right here.

• Convert high‑churn components to signal inputs/computed/effects

• Bridge RxJS streams with toSignal

• Stop mutating arrays/objects in place—use immutable updates

Phase 2: Introduce SignalStore facades

SignalStore gives you a single reactive surface for the UI to depend on. You can still feed it from NgRx or services during the transition.

• Create store per domain (user, devices, analytics)

• Expose readonly computed selectors + method updaters

• Keep existing NgRx/services as the backing data source temporarily

Phase 3: Remove imperative patches

If a view depends on something, make it a signal. If something causes a side effect (e.g., analytics log), make it an effect.

• Delete detectChanges/markForCheck scattered calls

• Replace NgZone.run with signal updates and effects

Phase 4: Staging canary with zoneless

If a widget stalls, you’ll find an un‑signaled state mutation or a wrapper that assumed zones. Fix there; do not revert the approach.

• Enable provideZonelessChangeDetection in staging build only

• Run Cypress e2e + Lighthouse; diff DevTools cycles against baseline

Phase 5: Progressive production rollout

We’ve used the same pattern for airport kiosk apps and telecom dashboards—no after‑hours heroics required.

• Firebase Hosting preview channels for QA sign‑off

• 1–5% canary, watch error budgets and INP

• Ramp to 100% once stable

Phase 6: Retire zone.js + document patterns

Your future hires will thank you. And yes, recruiters love seeing clear Signals docs in repos.

• Remove zone.js polyfill and clean config

• Add ADRs and docs for Signals/SignalStore conventions

main.ts with zoneless flag

import { bootstrapApplication } from '@angular/platform-browser';
import { provideHttpClient } from '@angular/common/http';
import { provideRouter } from '@angular/router';
import { provideZonelessChangeDetection } from '@angular/core';
import { AppComponent } from './app/app.component';
import { routes } from './app/app.routes';
import { environment } from './environments/environment';

bootstrapApplication(AppComponent, {
  providers: [
    provideHttpClient(),
    provideRouter(routes),
    ...(environment.enableZoneless ? [provideZonelessChangeDetection()] : [])
  ]
});

Polyfills cleanup when going live

// polyfills.ts
// Remove: import 'zone.js'; // ❌ no longer needed when zoneless

CI guardrail for a staged flip

# .github/workflows/e2e.yml
name: e2e-zoneless
on: [push]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20 }
      - run: npm ci
      - run: npm run build -- --configuration=staging --define=enableZoneless=true
      - run: npx cypress run --config-file cypress.zoneless.config.ts
      - run: npx lighthouse http://localhost:4200 --budget-path=./budgets.json

Store definition

// devices.store.ts
import { signalStore, withState, withMethods, patchState } from '@ngrx/signals';
import { computed, inject } from '@angular/core';
import { DevicesApi } from './devices.api';

interface DevicesState {
  list: ReadonlyArray<Device>;
  selectedId: string | null;
  loading: boolean;
}

const initialState: DevicesState = { list: [], selectedId: null, loading: false };

export const DevicesStore = signalStore(
  withState(initialState),
  withMethods((store) => {
    const api = inject(DevicesApi);

    const load = async () => {
      patchState(store, { loading: true });
      const data = await api.fetchDevices();
      patchState(store, { list: data, loading: false });
    };

    const select = (id: string | null) => patchState(store, { selectedId: id });

    return { load, select };
  })
);

// selectors (signals)
export const devices = (s: DevicesState) => s.list;
export const selected = (s: DevicesState) =>
  computed(() => s.list.find(d => d.id === s.selectedId) ?? null);

Component usage with Signals

@Component({
  selector: 'ux-device-panel',
  template: `
    <p-table [value]="store.list()" (onRowSelect)="store.select($event.data.id)"></p-table>
    <ux-device-details [device]="selected()" />
  `
})
export class DevicePanel {
  store = inject(DevicesStore);
  readonly selected = selected(this.store.state());
  ngOnInit() { this.store.load(); }
}

Bridging RxJS feeds

// If you have a WebSocket stream
import { toSignal } from '@angular/core/rxjs';
readonly deviceEvents = toSignal(this.socket.events$, { initialValue: null });

// React via effect (no NgZone.run required)
effect(() => {
  const evt = this.deviceEvents();
  if (!evt) return;
  this.store.applyEvent(evt); // method updates signals under the hood
});

Before (zone.js + mutable state)

filterText = '';
rows: Order[] = [];

applyFilter(txt: string) {
  this.filterText = txt;
  this.cd.detectChanges(); // ❌ imperative
}

After (Signals + computed)

import { input, signal, computed, effect } from '@angular/core';

readonly filter = signal('');
readonly rows = signal<Order[]>([]);
readonly filtered = computed(() => {
  const f = this.filter().toLowerCase();
  return this.rows().filter(r => r.customer.toLowerCase().includes(f));
});

// template
// <input pInputText (input)="filter.set($any($event.target).value)"/>
// <p-table [value]="filtered()"></p-table>

// optional analytics without zone
effect(() => {
  this.analytics.track('orders_filter', { q: this.filter() });
});

Discovery (week 1)

I ship a written assessment with a prioritized migration map and risk register.

• Audit high‑churn components via DevTools

• Map NgZone/detectChanges hotspots

• Baseline Web Vitals in CI

Implementation (weeks 2–6)

I keep feature delivery moving; no feature freeze required.

• Convert components to Signals

• Introduce SignalStore facades

• Fix adapters around tables/charts/forms

• Zoneless canary in staging → production

Outcomes I target

On a telecom analytics app, typed WebSockets + SignalStore cut dropped frames to zero and held 60fps during peak bursts.

• −40–70% change‑detection cycles on key routes

• Stable INP even under WebSocket bursts

• Zero user-visible regressions during rollout

Signals that you need help

This is classic pre‑zoneless pain. Bringing in an Angular contractor for a focused 2–4 week rescue pays for itself in stability alone.

• Frequent detectChanges/Zones patches in code reviews

• Flaky tables/forms after async events

• Multiple state sources with unclear ownership

What you’ll get

You keep shipping features while the foundation gets stronger.

• A phased plan with roll‑back levers

• SignalStore facades for critical domains

• CI guardrails and documentation

Measure, migrate, verify, then flip

You don’t need heroics—just a disciplined plan.

• Instrument before code changes

• Migrate components + state first

• Kill imperative patches

• Canary zoneless with guardrails

Next steps to instrument

I keep these dashboards visible to PMs so we make business‑visible progress every sprint.

• Angular DevTools profiles saved per route

• GA4/Firebase custom metrics for INP under interaction types

• Feature flags tied to release channels