Angular 12–15 ➜ 20: Signals, NgRx→SignalStore, RxJS 7 fixes, and change detection that won’t break prod

The scene: a jittery dashboard and a hiring deadline

I start with measurement: Angular DevTools flame charts and GA4 to baseline TTI, CLS, and error rates. Then we adapt—not rewrite—state so we can turn new slices on per route/tenant.

Why Angular 12 apps break during Signals migration

This is the blueprint we’ll follow: adapters first, then SignalStore slices, and only then consider zoneless.

How an Angular Consultant Approaches Signals Migration

Adapters buy you time and safety; SignalStore earns simplicity over time.

Bridging NgRx selectors and RxJS streams to Signals

// apps/dashboard/src/app/containers/analytics.container.ts
import { Component, computed, inject, signal } from '@angular/core';
import { Store } from '@ngrx/store';
import { toSignal } from '@angular/core/rxjs-interop';
import { selectChartData, selectLoading } from '../state';

@Component({
  selector: 'app-analytics',
  template: `
    <p-progressSpinner *ngIf="loading()" />
    <app-chart [series]="series()"></app-chart>
  `,
})
export class AnalyticsContainer {
  private store = inject(Store);

  // Provide stable initial values to keep SSR/tests deterministic
  readonly series = toSignal(this.store.select(selectChartData), { initialValue: [] });
  readonly loading = toSignal(this.store.select(selectLoading), { initialValue: true });

  // Derived graph with computed() — identity stable, fewer checks
  readonly top5 = computed(() => this.series().slice(0, 5));
}

Best practice: ensure selectors are memoized and return stable references (e.g., reuse arrays/objects when contents haven’t changed). Angular DevTools will show render counts dropping when identity is stable.

Introducing SignalStore without a big bang

// libs/filters/data-access/src/lib/filters.store.ts
import { signalStore, withState, withMethods, withComputed } from '@ngrx/signals';
import { computed, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { tap } from 'rxjs/operators';

export interface FiltersState {
  query: string;
  tags: string[];
  loading: boolean;
}

const initialState: FiltersState = { query: '', tags: [], loading: false };

export const FiltersStore = signalStore(
  { providedIn: 'root' },
  withState(initialState),
  withComputed((store) => ({
    hasQuery: computed(() => !!store.query()),
    tagCount: computed(() => store.tags().length),
  })),
  withMethods((store) => {
    const http = inject(HttpClient);
    return {
      setQuery(query: string) { store.query.set(query); },
      toggleTag(tag: string) {
        const next = new Set(store.tags());
        next.has(tag) ? next.delete(tag) : next.add(tag);
        store.tags.set([...next]);
      },
      loadTags() {
        store.loading.set(true);
        return http.get<string[]>('/api/tags').pipe(
          tap(tags => { store.tags.set(tags); store.loading.set(false); })
        ).subscribe();
      }
    };
  })
);

Router-level canaries: mount this store only for a flagged route first. If metrics regress, flip back to NgRx in seconds.

RxJS 7 refactors that save you from ghost bugs

// libs/core/data/src/lib/rxjs-fixes.ts
import { Observable, defer, timer, firstValueFrom } from 'rxjs';
import { shareReplay, retryWhen, scan, delayWhen } from 'rxjs/operators';

export function stableReplay<T>(source$: Observable<T>) {
  // Ensure a single shared subscription and late subscribers get last value
  return source$.pipe(
    shareReplay({ bufferSize: 1, refCount: true })
  );
}

export async function getOnce<T>(source$: Observable<T>): Promise<T> {
  // Replace legacy toPromise
  return firstValueFrom(source$);
}

export function withExponentialBackoff<T>(source$: Observable<T>, maxRetries = 5) {
  return source$.pipe(
    retryWhen(errors => errors.pipe(
      scan((acc) => acc + 1, 0),
      delayWhen((attempt) => timer(Math.min(1000 * 2 ** attempt, 15000)))
    ))
  );
}

// Typed WebSocket -> Observable -> Signal
import { webSocket } from 'rxjs/webSocket';
import { toSignal } from '@angular/core/rxjs-interop';
import { inject, effect } from '@angular/core';

interface PriceTick { symbol: string; bid: number; ask: number; ts: number; }

export function usePrices() {
  const socket$ = stableReplay(
    withExponentialBackoff(
      webSocket<PriceTick>({ url: 'wss://prices.example', deserializer: e => JSON.parse(e.data) })
    )
  );

  const prices = toSignal(socket$, { initialValue: { symbol: '', bid: 0, ask: 0, ts: 0 } });

  // Optional: effect to persist samples or raise alerts
  effect(() => {
    const p = prices();
    if (p.symbol && p.bid === 0) {
      // Telemetry/alert here
    }
  });

  return { prices };
}

Change detection: keep zone.js or go zoneless?

// main.ts (Angular 20)
import { bootstrapApplication, provideExperimentalZonelessChangeDetection } from '@angular/core';
import { provideHttpClient } from '@angular/common/http';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [
    provideHttpClient(),
    // Gate behind an env flag or Remote Config
    ...(environment.zoneless ? [provideExperimentalZonelessChangeDetection()] : [])
  ]
});

If you see jitter or missed updates, flip the flag off and triage with flame charts. Don’t ship zoneless by default until metrics are green.

Guardrails: CI, telemetry, and linting that catch regressions

// .eslintrc.json (excerpt)
{
  "overrides": [
    {
      "files": ["*.ts"],
      "rules": {
        "no-restricted-imports": ["error", { "paths": [{ "name": "rxjs", "importNames": ["toPromise"], "message": "Use first/lastValueFrom" }] }],
        "rxjs/no-subject-value": "error",
        "@angular-eslint/prefer-signals": "warn"
      }
    }
  ]
}

When to Hire an Angular Developer for Legacy Rescue

I’ve run this process at a global entertainment company (employee/payments tracking), a broadcast media network VPS scheduling, an insurance technology company telematics dashboards, and United kiosks with Docker-based hardware simulation.

Example: dashboard upgrade from jitter to stable

<!-- After: stable identity + Signals-driven inputs -->
<app-chart [series]="series()" [filters]="filtersStore.tags()"></app-chart>

The change is visible in flame charts: fewer checks, fewer microtasks, more predictable UX.

Practical takeaways and next instrumentation

• Signals adoption is safest via adapters first, then targeted SignalStore slices.
• Fix RxJS semantics early (toPromise, shareReplay, catchError typing).
• Keep zone.js while stabilizing; only test zoneless behind a flag.
• Lock guardrails in CI so regressions can’t sneak in.
• Measure everything with Angular DevTools, GA4, and OpenTelemetry.

Ready to upgrade? Let’s talk

See how I stabilize legacy apps and rescue chaotic code: review your Angular roadmap, or hire an Angular consultant for a focused upgrade sprint.