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

A dashboard jitters, the exec wants numbers, you need a plan

You know the smell: a PrimeNG dashboard that jitters when filters change, components re-render on scroll, and every microtask pings the zone bell. Meanwhile leadership wants proof that Signals will reduce cost-to-ship and improve Core Web Vitals before Q1. I’ve been there—on employee tracking systems at a global entertainment company and on a broadcast VPS scheduler. The move to Signals + SignalStore is worth it, but only if you plan it like a release, not a refactor.

Why Angular 20+ teams should go zoneless in phases

The multi‑phase migration roadmap

# ci/lighthouse-budget.yml (Nx + GitHub Actions)
name: lighthouse
on: [pull_request]
jobs:
  lhci:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v3
        with: { version: 9 }
      - run: pnpm install --frozen-lockfile
      - run: pnpm nx run web:build:production
      - run: npx @lhci/cli autorun --upload.target=temporary-public-storage
        env:
          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}

Phase 1 — Migrate leaf components to Signals

• Convert @Input to input(), derive with computed(), and move template pipes into computed() functions. Start where change cascades are worst (grids, filters, charts).

// leaf-filter.component.ts
import { Component, input, computed, effect, signal } from '@angular/core';

@Component({
  selector: 'leaf-filter',
  standalone: true,
  template: `
    <p-dropdown [options]="options()" [(ngModel)]="selected()"></p-dropdown>
  `
})
export class LeafFilterComponent {
  options = input.required<{ label: string; value: string }[]>();
  selected = signal<string | null>(null);

  // derive expensive work once per change, not per CD tick
  selectedLabel = computed(() =>
    this.options().find(o => o.value === this.selected() ?? '')?.label ?? 'All'
  );

  // local side effect: analytics
  log = effect(() => {
    console.debug('filter selected', this.selectedLabel());
  });
}

Phase 2 — Introduce SignalStore per feature

• Create small stores for cohesive features (auth, filters, telematics devices). Keep fetch logic and derived state in the store; UI consumes signals.

// devices.store.ts (NgRx SignalStore)
import { SignalStore, withEntities, patchState, withComputed } from '@ngrx/signals';
import { computed, inject } from '@angular/core';
import { DevicesApi, Device } from '../data/devices.api';

export class DevicesStore extends SignalStore(
  { entities: withEntities<Device>() },
  withComputed(({ entities }) => ({
    onlineCount: computed(() => entities().filter(d => d.online).length),
  }))
) {
  private api = inject(DevicesApi);

  load() {
    this.api.list().subscribe(list => patchState(this, state => ({
      entities: list
    })));
  }

  toggle(id: string) {
    patchState(this, ({ entities }) => ({
      entities: entities.map(d => d.id === id ? { ...d, online: !d.online } : d)
    }));
  }
}

Phase 3 — Typed RxJS↔Signals adapters

• Bridge HTTP/WebSockets to Signals with toSignal; expose readonly signals to components. Keep stream types strict and testable.

// rxjs-adapter.ts
import { toSignal } from '@angular/core/rxjs-interop';
import { Injectable, computed, effect } from '@angular/core';
import { map, shareReplay } from 'rxjs/operators';
import { TelemetryService } from './telemetry.service';

@Injectable({ providedIn: 'root' })
export class VehicleTelemetryState {
  private $events = this.telemetry.events$.pipe(
    map(e => ({ id: e.id, speed: e.speed, ts: e.ts })),
    shareReplay({ bufferSize: 1, refCount: true })
  );

  events = toSignal(this.$events, { initialValue: [] as any[] });
  avgSpeed = computed(() => {
    const list = this.events();
    return list.length ? list.reduce((a, b) => a + b.speed, 0) / list.length : 0;
  });

  constructor(private telemetry: TelemetryService) {
    effect(() => {
      // example side effect: alert if average exceeds threshold
      if (this.avgSpeed() > 80) console.warn('High average speed');
    });
  }
}

Phase 4 — Zoneless opt‑in behind a release flag

• Zoneless is an application-level switch. Treat it like a release: enable on a preview channel, then canary, then 100%.

// main.ts — choose zoneless at bootstrap via env flag (set per deploy channel)
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { provideHttpClient } from '@angular/common/http';
import { routes } from './app/app.routes';
import { provideRouter } from '@angular/router';

// window.__APP_FLAGS__ injected at build/deploy time (e.g., Firebase Hosting channel)
const flags = (window as any).__APP_FLAGS__ ?? { zoneless: false };

bootstrapApplication(AppComponent, {
  providers: [provideHttpClient(), provideRouter(routes)],
  ngZone: flags.zoneless ? 'noop' : 'zone.js'
}).catch(console.error);

Phase 5 — Remove zone dependencies and document patterns

• Replace any imperative markForCheck patterns that depended on zone microtasks. Audit third-party libs (date pickers, charts). PrimeNG and Highcharts work fine with Signals if inputs are signals/computed and change events are explicit.

• Update team docs, add examples in Storybook, and enforce with lint rules (no @Input set with heavy pipe chains in templates, prefer computed()).

Real‑world guardrails from the field

How an Angular Consultant Approaches Signals Migration

When to Hire an Angular Developer for Legacy Rescue

Common pitfalls and how to avoid them

Measurable outcomes and what to instrument next