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

The Dashboard That Jitters: The Hook

If your Angular dashboard jitters during WebSocket bursts or your kiosk UI spins CPU during idle input listeners, you’re paying the zone.js tax. I’ve seen it at enterprise scale—a global entertainment company workforce tools, a broadcast media network scheduling, and United airport kiosks. The fix isn’t a flag; it’s a playbook.

As companies plan 2025 Angular roadmaps, Signals are table stakes. But turning off zones too early can cascade regressions—stale templates, phantom toasts, stuck spinners. Here’s the multi‑phase plan I run as an Angular consultant to modernize change detection with zero UX breakage.

Why Angular Teams Need a Phased zone.js → Signals Plan

The Multi‑Phase Migration Plan

Implementation Details: Code and Guardrails

// rxjs-interop.ts
import { inject, Injectable, computed, signal } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { WebSocketSubject } from 'rxjs/webSocket';
import { map, retry, shareReplay } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class FlightsFeed {
  private ws = new WebSocketSubject<any>('wss://example.com/flights');
  private flights$ = this.ws.pipe(
    retry({ count: 5, delay: (e, i) => Math.min(1000 * 2 ** i, 15000) }),
    map(msg => msg.payload as Flight[]),
    shareReplay({ bufferSize: 1, refCount: true })
  );

  // Keep stream, expose a signal for templates/SignalStore
  flights = toSignal(this.flights$, { initialValue: [] as Flight[] });
  count = computed(() => this.flights().length);
}

// flights.store.ts (SignalStore)
import { signalStore, withState, withComputed, withMethods, patchState } from '@ngrx/signals';
import { inject, computed } from '@angular/core';
import { HttpClient } from '@angular/common/http';

interface FlightsState {
  flights: Flight[];
  loading: boolean;
  selectedId: string | null;
}

const initialState: FlightsState = { flights: [], loading: false, selectedId: null };

export const FlightsStore = signalStore(
  { providedIn: 'root' },
  withState(initialState),
  withComputed(({ flights, selectedId }) => ({
    selected: computed(() => flights().find(f => f.id === selectedId()) ?? null),
    delayedCount: computed(() => flights().filter(f => f.status === 'delayed').length),
  })),
  withMethods((store) => {
    const http = inject(HttpClient);
    return {
      load: async () => {
        patchState(store, { loading: true });
        try {
          const flights = await http.get<Flight[]>('/api/flights').toPromise();
          patchState(store, { flights: flights ?? [], loading: false });
        } catch {
          patchState(store, { loading: false });
        }
      },
      select: (id: string | null) => patchState(store, { selectedId: id })
    };
  })
);

<!-- flights.component.html -->
<p-dropdown
  [options]="store.flights()"
  optionLabel="number"
  [loading]="store.loading()"
  (onChange)="store.select($event.value?.id)">
</p-dropdown>

<div *ngIf="store.selected() as sel">
  <h3>Flight {{ sel.number }}</h3>
  <p>Status: {{ sel.status }}</p>
</div>

<p>Delayed flights: {{ store.delayedCount() }}</p>

// render-count.directive.ts — measure template stability
import { Directive, ElementRef, inject } from '@angular/core';
import { afterRender } from '@angular/core';

@Directive({ selector: '[renderCount]' })
export class RenderCountDirective {
  private el = inject(ElementRef<HTMLElement>).nativeElement;
  private count = 0;

  constructor() {
    afterRender(() => {
      this.count++;
      this.el.dataset.renders = String(this.count);
    });
  }
}

// zoneless-flag.service.ts — Firebase Remote Config gate
import { Injectable } from '@angular/core';
import { getRemoteConfig, fetchAndActivate, getBoolean } from 'firebase/remote-config';

@Injectable({ providedIn: 'root' })
export class ZonelessFlagService {
  private rc = getRemoteConfig();
  async enabled(): Promise<boolean> {
    await fetchAndActivate(this.rc);
    return getBoolean(this.rc, 'signals_zoneless_pilot');
  }
}

# nx-ci.yaml — guardrails excerpt
name: ci
on: [push, pull_request]
jobs:
  verify:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20 }
      - run: npm ci
      - run: npx nx run web:lint
      - run: npx nx run web:test --code-coverage
      - run: npx nx run web:e2e --configuration=ci
      - run: npx nx run web:devtools-render-check -- --budget=+0  # custom script fails if render counts↑
      - run: npx lighthouse http://localhost:4200 --config-path=./lighthouserc.json --budgets-path=./budgets.json

Third‑Party Boundaries: PrimeNG and Friends

// primeng-adapter.component.ts
import { Component, input, output, Signal } from '@angular/core';

@Component({
  selector: 'app-safe-dropdown',
  template: `
    <p-dropdown [options]="options()" (onChange)="onChange($event.value)"></p-dropdown>
  `,
  standalone: true
})
export class SafeDropdownComponent {
  options = input.required<any[]>();
  changed = output<any>();
  onChange(value: any) { this.changed.emit(value); }
}

Use SafeDropdownComponent instead of scattering event logic. The store consumes outputs, and templates read only signals. No hidden zone coupling.

Proving Progress with Telemetry

Angular DevTools flame charts plus a simple renderCount directive will tell you if the migration is working. Trend these numbers in CI; block merges that increase renders on critical dashboards.

How an Angular Consultant Approaches Signals Migration

When to Hire an Angular Developer for Legacy Rescue

See how we can stabilize your Angular codebase and plan a low‑risk migration.

Concise Takeaways and Next Steps

• Keep zones on while you introduce Signals at the edges and in SignalStore.
• Wrap third‑party boundaries; don’t rely on change detection magic.
• Pilot zoneless behind feature flags; expand only when telemetry is flat.
• Prove progress with render counts, flame charts, and perf budgets in CI.

If you need an Angular expert to design and deliver this migration, let’s review your codebase and roadmap within 48 hours.

Common Questions