Modernize State to Signals in Legacy AngularJS/9–14 Apps Without a Rewrite: Adapters, SignalStore, and Strangler Patterns

Why Jumping to Signals Without a Rewrite Matters Now

The Safe Strangler Plan for Legacy State

Signals Adapters That Work with NgRx and Legacy Services

// facade/orders.facade.ts
import { Injectable, computed, inject } from '@angular/core';
import { Store, selectSignal } from '@ngrx/store';
import { toSignal } from '@angular/core/rxjs-interop';
import * as Orders from './orders.selectors';
import * as OrdersActions from './orders.actions';
import { OrdersService } from './orders.service';

@Injectable({ providedIn: 'root' })
export class OrdersFacade {
  private store = inject(Store);
  private svc = inject(OrdersService); // legacy Observable API

  // NgRx → Signals
  orders = selectSignal(this.store, Orders.selectAll);
  loading = selectSignal(this.store, Orders.selectLoading);

  // Observable service → Signal
  svcHealth = toSignal(this.svc.health$(), { initialValue: 'unknown' });

  // Derived with computed()
  openOrders = computed(() => this.orders().filter(o => o.status === 'open'));

  // Preserve dispatch API
  refresh() { this.store.dispatch(OrdersActions.refresh()); }
}

// component usage (Angular 20+ template)
@Component({
  selector: 'orders-table',
  template: `
    <p-progressBar *ngIf="facade.loading()" mode="indeterminate"></p-progressBar>
    <orders-grid [rows]="facade.openOrders()"></orders-grid>
  `
})
export class OrdersTableComponent { constructor(public facade: OrdersFacade) {} }

Introducing SignalStore Slices Without Breaking Features

// stores/filters.store.ts (NgRx SignalStore)
import { signalStore, withState, withComputed, withMethods, patchState } from '@ngrx/signals';

interface FilterState {
  query: string;
  status: 'all' | 'open' | 'closed';
}

const initial: FilterState = { query: '', status: 'all' };

export const FiltersStore = signalStore(
  { providedIn: 'root' },
  withState(initial),
  withComputed(({ query, status }) => ({
    hasQuery: () => query().length > 0,
    isNarrow: () => status() !== 'all'
  })),
  withMethods((store) => ({
    setQuery(query: string) { patchState(store, { query }); },
    setStatus(status: FilterState['status']) { patchState(store, { status }); },
    reset() { patchState(store, initial); }
  }))
);

// filters.facade.ts — preserving old API
@Injectable({ providedIn: 'root' })
export class FiltersFacade {
  constructor(private filters: FiltersStore) {}
  query = this.filters.query; // signal read
  status = this.filters.status; // signal read
  hasQuery = this.filters.hasQuery; // computed signal

  setQuery(v: string) { this.filters.setQuery(v); }
  setStatus(s: 'all' | 'open' | 'closed') { this.filters.setStatus(s); }
  reset() { this.filters.reset(); }
}

AngularJS Hybrids and Microfrontends: How to Bridge

// bridging: from Signal to Observable for AngularJS consumers
import { toObservable } from '@angular/core/rxjs-interop';
import { signal } from '@angular/core';
import { map, startWith } from 'rxjs/operators';

const count = signal(0);
export const count$ = toObservable(count).pipe(
  map(v => ({ value: v })),
  startWith({ value: 0 })
);

// AngularJS controller can $scope.$watch via async pipe or subscribe

// downgrade an Angular component into AngularJS
import { downgradeComponent } from '@angular/upgrade/static';
import { OrdersTableComponent } from './orders-table.component';

angular.module('legacy').directive('ordersTable', downgradeComponent({
  component: OrdersTableComponent
}));

Instrumentation, Guardrails, and A11y Checks

# .github/workflows/ci.yml (excerpt)
name: ci
on: [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 affected -t lint,test,build --parallel=3
      - run: npx lhci autorun --config=./lighthouse-ci.json
      - run: npx cypress run --component --browser chrome

How an Angular Consultant Approaches Signals Migration

When to Hire an Angular Developer for Legacy Rescue