Incremental Angular 20 Adoption via Feature Flags: Signals, Built‑In Control Flow, and Zoned→Zoneless Rollouts

The Feature‑Flagged Path to Angular 20 Without Downtime

Flag Architecture: SignalStore, Firebase, and Local Overrides

// flags.store.ts (Angular 20 + @ngrx/signals)
import { inject } from '@angular/core';
import { signalStore, withState, withMethods, patchState } from '@ngrx/signals';
import { RemoteConfig, getAll } from '@angular/fire/remote-config';

export type FlagKey =
  | 'signals_kpis'
  | 'controlflow_templates'
  | 'rxjs8'
  | 'ssr_hydration'
  | 'zoneless';

interface FlagsState {
  values: Record<FlagKey, boolean>;
  loaded: boolean;
}

const defaults: FlagsState['values'] = {
  signals_kpis: false,
  controlflow_templates: false,
  rxjs8: false,
  ssr_hydration: false,
  zoneless: false,
};

export const FlagsStore = signalStore(
  withState<FlagsState>({ values: defaults, loaded: false }),
  withMethods((store) => ({
    isEnabled(key: FlagKey) { return store.values()[key] ?? false; },
    async loadRemote() {
      const rc = inject(RemoteConfig, { optional: true });
      try {
        const controller = new AbortController();
        const timeout = setTimeout(() => controller.abort(), 1500);
        if (rc) {
          const all = getAll(rc);
          const merged = { ...defaults } as Record<FlagKey, boolean>;
          Object.entries(all).forEach(([k, v]) => {
            const key = k as FlagKey;
            if (key in merged) merged[key] = v.asBoolean();
          });
          patchState(store, { values: merged, loaded: true });
        } else {
          patchState(store, { loaded: true });
        }
      } catch {
        patchState(store, { loaded: true });
      }
    },
    overrideFromQuery(qp: URLSearchParams) {
      const current = { ...store.values() };
      (Object.keys(current) as FlagKey[]).forEach((k) => {
        const qv = qp.get(k);
        if (qv === '1' || qv === 'true') current[k] = true;
        if (qv === '0' || qv === 'false') current[k] = false;
      });
      patchState(store, { values: current });
    }
  }))
);

// app.config.ts
import { APP_INITIALIZER, inject, provideAppInitializer } from '@angular/core';
export const provideFlagsInit = () => ({
  provide: APP_INITIALIZER,
  multi: true,
  useFactory: () => () => {
    const store = inject(FlagsStore);
    const qp = new URLSearchParams(globalThis.location?.search ?? '');
    store.overrideFromQuery(qp);
    return store.loadRemote();
  }
});

Gate at Three Layers: Route, Component, API

// 1) Route gating
import { CanMatchFn } from '@angular/router';
export const canMatchFlag = (flag: FlagKey): CanMatchFn => () =>
  inject(FlagsStore).isEnabled(flag);

export const routes: Routes = [
  {
    path: 'kpis-new',
    canMatch: [canMatchFlag('signals_kpis')],
    loadComponent: () => import('./kpis/signals-kpis.component').then(m => m.Cmp)
  }
];

// 2) Structural directive
import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
@Directive({ selector: '[ifFlag]', standalone: true })
export class IfFlagDirective {
  private hasView = false;
  constructor(private tpl: TemplateRef<any>, private vcr: ViewContainerRef) {}
  @Input({ required: true }) set ifFlag(flag: FlagKey) {
    const enabled = inject(FlagsStore).isEnabled(flag);
    if (enabled && !this.hasView) { this.vcr.createEmbeddedView(this.tpl); this.hasView = true; }
    else if (!enabled && this.hasView) { this.vcr.clear(); this.hasView = false; }
  }
}

// 3) Service branching (RxJS8 + Signals path)
@Injectable({ providedIn: 'root' })
export class KpiService {
  private flags = inject(FlagsStore);
  getVehicleKpis() {
    if (this.flags.isEnabled('rxjs8')) {
      // New pipeline, typed events, backoff
      return from(fetch('/api/kpis')).pipe(
        map(res => res.json() as Promise<Kpi[]>), mergeMap(x => x)
      );
    }
    // Legacy path
    return this.http.get<Kpi[]>('/api/kpis');
  }
}

<!-- Old vs new template control flow behind a flag -->
<section *ifFlag="'controlflow_templates'">
  @if (kpis().length) {
    <app-kpi-grid [data]="kpis()" />
  } @else {
    <p>No KPIs.</p>
  }
</section>
<section *ngIf="!flags.isEnabled('controlflow_templates')">
  <app-kpi-grid [data]="kpisLegacy$ | async" />
</section>

CI/CD Guardrails: Test Both Worlds

name: ci
on: [push, pull_request]
jobs:
  build-test:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        flagset: [baseline, treatment]
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v4
        with: { version: 9 }
      - run: pnpm install --frozen-lockfile
      - name: Build
        run: |
          if [ "${{ matrix.flagset }}" = "treatment" ]; then
            export FLAG_signals_kpis=true FLAG_controlflow_templates=true FLAG_rxjs8=true
          fi
          pnpm nx build web --configuration=ci
      - name: Test
        run: pnpm nx run-many -t test --all --configuration=ci
      - name: E2E
        run: pnpm nx e2e web-e2e --configuration=${{ matrix.flagset }}
      - name: Lighthouse
        run: pnpm lhci autorun --config=.lighthouserc.${{ matrix.flagset }}.json
      - name: Accessibility
        run: pnpm pa11y-ci --config .pa11y.${{ matrix.flagset }}.json

Rollout Strategy, Telemetry, and Rollback

// GA4 exposure (simplified)
export function recordFlagExposure(analytics: Analytics, store: FlagsStore) {
  const values = store.values();
  Object.entries(values).forEach(([k, v]) => {
    logEvent(analytics, 'flag_exposed', { key: k, enabled: v });
  });
}

When to Hire an Angular Developer for Legacy Rescue

How an Angular Consultant Approaches Flagged Signals Migration