Plan a Safe Multi‑Phase Migration from zone.js to Signals + SignalStore in Angular 20+

The Jitter Test: A Real Scene from the Front Lines

Why Angular Apps Break During Zoneless Signals Migration

A Multi‑Phase Plan: From zone.js to Signals + SignalStore

Implementation Deep Dive: Flags, Adapters, and Store Patterns

// main.ts (Angular 20+)
import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';
import { provideZoneChangeDetection } from '@angular/core';
import { AppComponent } from './app/app.component';
import { routes } from './app/app.routes';
import { injectFlags } from './app/flags';

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes),
    provideHttpClient(),
    // Keep zone.js during early phases; enable coalescing now
    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
  ],
  // Later, for canary cohorts only:
  // ngZone: injectFlags().zonelessCanary() ? 'noop' : undefined,
});

// flags.ts – Firebase Remote Config or env-backed feature flags
import { signal, computed, inject } from '@angular/core';
import { RemoteConfig, getBoolean } from './remote-config';

const raw = signal({ zonelessCanary: false, enableSignals: true });

export function provideFlags() {
  const rc = inject(RemoteConfig);
  raw.update(v => ({
    ...v,
    zonelessCanary: getBoolean(rc, 'zoneless_canary'),
    enableSignals: getBoolean(rc, 'enable_signals')
  }));
  return { raw };
}

export function injectFlags() {
  const state = provideFlags();
  return {
    zonelessCanary: () => computed(() => state.raw().zonelessCanary)(),
    enableSignals: () => computed(() => state.raw().enableSignals)()
  };
}

// users.store.ts – SignalStore slice with RxJS interop
import { signalStore, withState, withComputed, withMethods, patchState } from '@ngrx/signals';
import { inject } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { switchMap, map } from 'rxjs/operators';
import { UsersApi, User } from './users.api';

interface UsersState {
  byId: Record<string, User>;
  loading: boolean;
  error?: string | null;
}

export const UsersStore = signalStore(
  withState<UsersState>({ byId: {}, loading: false, error: null }),
  withComputed((state) => ({
    list: () => Object.values(state.byId()),
    count: () => Object.keys(state.byId()).length
  })),
  withMethods((store) => {
    const api = inject(UsersApi);

    return {
      load() {
        patchState(store, { loading: true, error: null });
        const stream$ = api.list$().pipe(map(users => Object.fromEntries(users.map(u => [u.id, u]))));
        const usersSig = toSignal(stream$, { initialValue: {} as Record<string, User> });
        // When usersSig changes, patch state once (zoneless-friendly, no manual markForCheck)
        patchState(store, { byId: usersSig(), loading: false });
      }
    };
  })
);

<!-- users.component.html – Signals in the view -->
<section *ngIf="store.count() as count">
  <p>{{ count }} users</p>
  <ul>
    <li *ngFor="let u of store.list(); trackBy: trackById">{{ u.name }}</li>
  </ul>
</section>

# .github/workflows/ci.yml – Nx + Lighthouse budgets + tests
name: ci
on: [push, pull_request]
jobs:
  build_test:
    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-many -t lint,test,build --parallel=3
      - name: Lighthouse CI (SSR build)
        run: |
          npx lhci autorun --collect.url=https://preview.example.com \
          --assert.assertions."performance".minScore=0.9 \
          --assert.assertions."interactive".maxNumericValue=3500

Fixing Real Issues: Overlays, Focus, and Streams

import { afterNextRender } from '@angular/core';

openDialog() {
  this.dialog.open(FormDialog);
  afterNextRender(() => {
    const el = document.querySelector('[autofocus]') as HTMLElement | null;
    el?.focus();
  });
}

// WebSocket toSignal with retry that won’t jitter charts
import { toSignal } from '@angular/core/rxjs-interop';
import { webSocket } from 'rxjs/webSocket';
import { retryBackoff } from 'backoff-rxjs';

const ws$ = webSocket<{ type: string; payload: unknown }>("wss://telemetry.example.com").pipe(
  retryBackoff({ initialInterval: 500, maxInterval: 10_000, maxRetries: 8 })
);

export const events = toSignal(ws$, { initialValue: { type: 'init', payload: null } });

How an Angular Consultant Approaches Signals Migration