Rescue Legacy AngularJS/9–14 State Without a Rewrite: Signals Adapters, Facades, and a Strangler Path That Ships

What I see in the field

I’m Matthew Charlton. I’ve rescued AngularJS and Angular 9–14 apps in aviation, media, telecom, insurance, IoT, and fintech. The pattern is familiar: a KPI dashboard jitters, a modal opens 300ms late, memory creeps after every route change. Teams want Signals but can’t stop shipping features. Good news: you don’t need a rewrite. You need a Signals adapter layer, a facade, and a strangler plan that you can defend in CI.

• Runaway change detection on every keystroke

• Subscriptions orphaned in feature flags

• Selectors feeding components and pipes directly

• Homegrown stores + NgRx + Subjects all in one app

Risk areas to avoid

Signals shift your mental model from streams to pull-based computation. If you rip out NgRx or legacy subjects too quickly, you’ll break effect chains, selectors, or memoization. The workable path is incremental: wrap legacy in read-only signals, move mutations behind a facade, then replace slices with SignalStore when tests and telemetry say it’s safe.

• Eagerly replacing NgRx with SignalStore across the app

• Mixing mutable shared services with computed signals

• Tight coupling to zone.js-based side effects

• Skipping telemetry, so regressions hide until prod

Step 1: Baseline and budget your wins

Before touching code, capture baselines. On a telecom ads analytics dashboard, we cut interactive latency by 28% just by stopping wasteful zone churn with Signals. If you need to hire an Angular developer to run a fast assessment, I can deliver a state audit within a week.

• Angular DevTools: profile change detection and component updates

• Core Web Vitals: INP and LCP in Lighthouse CI

• Memory: Chrome heap snapshots on route churn

• Business KPIs: task success and time-to-insight

Step 2: Wrap legacy selectors and subjects in read-only Signals

This step delivers immediate wins with almost zero risk. Components consume signals; legacy pipelines keep working behind the scenes.

• Keep NgRx selectors and service subjects; expose toSignal wrappers

• No mutations yet—preserve existing dispatch/next calls

• Use computed() for derived state to simplify components

Step 3: Introduce a Signals Facade

The facade is your seam. It hides whether the source is NgRx, a Subject, Firebase, or a SignalStore slice.

• Centralize reads (signals) and writes (methods)

• Guard with feature flags and contract tests

• Route mutations to legacy actions/effects until replaced

Step 4: Strangler-replace one slice with SignalStore

Ship one slice at a time: users, sessions, preferences, or a single report. In a broadcast network VPS scheduler, we moved just the calendar slice to SignalStore in two weeks while features kept shipping.

• Clone state shape; keep action names for telemetry continuity

• Migrate effects to methods using inject(HttpClient)

• Delete legacy slice when dashboards and tests go green

Step 5: CI and telemetry guardrails

Guard the migration. When we stabilized an employee tracking and payment system, CI caught a regression where a computed signal looped a date pipe; we fixed it before prod.

• Nx affected targets + Cypress canaries

• Lighthouse CI budgets for INP/LCP

• OpenTelemetry/GA4 events for state transitions

• Firebase Logs for error taxonomy

If you still have AngularJS pieces

You don’t need to drag AngularJS into your Angular 20 app. Keep it isolated and surface the minimum contract as signals.

• Expose $rootScope events as RxJS and wrap with toSignal

• Use an upgrade adapter at the boundary, not inside components

• Prefer read-only signals until you strangle the service

Example: $rootScope to signal

// AngularJS -> RxJS -> Angular Signal
import { toSignal } from '@angular/core/rxjs-interop';
import { Observable } from 'rxjs';

function fromRootScope($rootScope: angular.IRootScopeService, event: string): Observable<any> {
  return new Observable(obs => {
    const off = $rootScope.$on(event, (_, data) => obs.next(data));
    return () => off();
  });
}

export function rootScopeEventSignal($rootScope: angular.IRootScopeService, event: string) {
  return toSignal(fromRootScope($rootScope, event), { initialValue: null });
}

My 6-step engagement

In an airline kiosk project, we used Docker-based hardware simulation and offline-tolerant flows. The same adapter/facade strategy let us modernize device state (printers, scanners, card readers) to Signals without blocking field deployments.

• Discovery (48 hours): repo scan, dependency map, risk register

• Assessment (1 week): state topology, event schema, rollout plan

• Pilot (2 weeks): signals facade + 1 SignalStore slice

• Expand (2–6 weeks): module-by-module strangler replacement

• Harden: telemetry hooks, error taxonomy, CI budgets

• Knowledge transfer: patterns, playbooks, and guardrails

Signals you need help now

If this reads like your week, hire an Angular expert who has shipped this path before. I bring Nx monorepo discipline, PrimeNG/Material theming, WebSocket telemetry patterns, and Firebase-backed canaries that make risky changes safe.

• Critical paths cross NgRx, subjects, and AngularJS services

• Feature velocity is high but regressions keep slipping into prod

• Core Web Vitals (INP) and memory trends worsen after releases

• You need a zero-downtime plan while upgrading Angular versions

Contract test a slice before and after

Typed events let you compare behavior across the strangler boundary. On IntegrityLens (our AI-powered verification system), we used the same tactic to validate streaming state—MTTR dropped by 35%.

• Define typed event schemas for state transitions

• Assert same outputs for same inputs pre/post migration

• Log to Firebase with correlation IDs for MTTR cuts

Nx + GitHub Actions

name: ci
on: [push, pull_request]
jobs:
  build-test:
    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 affected -t lint,test,build --parallel=3
      - run: pnpm nx run web:ci-lh # Lighthouse budgets for INP/LCP
      - run: pnpm nx run e2e:cy:run # Cypress canaries

Instrument with Angular DevTools and GA4

Ship with numbers. In a telecom analytics platform, this discipline let us keep a 99.98% uptime while modernizing state, similar to how gitPlumbers helps teams stabilize and rescue chaotic codebases.

• Count component updates before/after

• Track interaction-to-next-paint (INP) by route

• Graph state errors by taxonomy in Firebase Logs

Context and constraints

We started by wrapping selectors in signals and moved the heaviest charting slice (D3/Highcharts) into SignalStore. Data virtualization and typed WebSocket events fed signals directly; components dropped 30–50% of change detection cycles, and INP improved from 220ms to 130ms across key dashboards.

• Angular 12, NgRx + ad-hoc subjects, PrimeNG tables/charts

• Release train every two weeks; no feature freeze allowed

• Multiple tenants with role-based views

Results you can take to leadership

This is the kind of outcome that makes budget conversations easier as companies plan 2025 Angular roadmaps.

• -40% component updates on hot routes

• -90% subscription code in components

• +25% faster perceived interactions (INP)

• No missed releases; zero-downtime rollout

A thin signals adapter for any observable

import { Signal } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { Observable } from 'rxjs';

export function asROSignal<T>(source$: Observable<T>, initialValue: T): Signal<T> {
  return toSignal(source$, { initialValue });
}

Guarded feature flag around the strangled slice

// env flag or Firebase Remote Config
@if (env.useSignalStoreUsers) {
  usersStore.loadUsers();
} @else {
  usersFacade.loadUsers();
}

Error taxonomy hook

export type UserError =
  | { kind: 'network'; path: string; status: number }
  | { kind: 'parse'; path: string; message: string }
  | { kind: 'auth'; message: string };

function logUserError(e: UserError) {
  // send to Firebase Logs / OpenTelemetry
}

Ship this week

Measure before and after. If the numbers don’t move, we adjust—no rewrites, just surgical improvements.

• Wrap 2–3 selectors/subjects with signals in your hottest route

• Add a facade with read methods + write methods (legacy under the hood)

• Pick one slice to strangle with SignalStore; guard with a flag

• Add INP/LCP budgets and a Cypress canary test in Nx CI

Instrument next

For real-time telemetry pipelines, I use typed event schemas, exponential retry, and backoff strategies with graceful UI states—these patterns carried our insurance telematics dashboards to production without drama.

• Typed WebSocket events for real-time dashboards

• GA4 engagement time per route after Signals adoption

• Error taxonomy heatmap in Firebase Logs