Incremental Angular 20 Upgrades with Feature Flags: Ship Signals, SSR, and UI Refactors Without Breaking Prod

The Friday dashboard that didn’t catch fire

As companies plan 2025 Angular roadmaps, Q1 is hiring season and pressure is high to adopt Angular 20+ features (Signals, Vite builder, SSR hydration) without regressions. Feature flags let you upgrade incrementally and prove each change with data before broad release.

Why Angular 20 teams need feature flags

Without flags, upgrades become all-or-nothing events. With flags, they become controlled experiments that harden your system before full launch.

Build a typed flag system with SignalStore (SSR-safe)

// feature-flags.model.ts
export type FeatureKey =
  | 'signalsStore'
  | 'viteSsrHydration'
  | 'primeNgDensityV2'
  | 'kioskOfflineFlow'
  | 'adsMarketRollout'
  | 'telemetryV2';

export interface FlagMeta {
  default: boolean;
  owner: string; // team or person
  description: string;
}

export const FLAG_REGISTRY: Record<FeatureKey, FlagMeta> = {
  signalsStore: { default: false, owner: 'platform', description: 'Enable SignalStore slices' },
  viteSsrHydration: { default: false, owner: 'platform', description: 'SSR + hydration via Vite' },
  primeNgDensityV2: { default: false, owner: 'design', description: 'New density + tokens' },
  kioskOfflineFlow: { default: true, owner: 'devices', description: 'Offline-first kiosk flows' },
  adsMarketRollout: { default: false, owner: 'ads', description: 'Enable new charts by market' },
  telemetryV2: { default: false, owner: 'ops', description: 'OTel event schema v2' },
};

// feature-flags.store.ts (Angular 20, @ngrx/signals)
import { Injectable, inject, TransferState, makeStateKey, effect, signal } from '@angular/core';
import { SignalStore, withState } from '@ngrx/signals';
import { FLAG_REGISTRY, FeatureKey } from './feature-flags.model';
import { RemoteConfig } from '@angular/fire/remote-config';

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

const FLAG_SSR_KEY = makeStateKey<Record<FeatureKey, boolean>>('flags');

@Injectable({ providedIn: 'root' })
export class FeatureFlagsStore extends SignalStore(withState<FlagsState>({
  values: Object.fromEntries(Object.entries(FLAG_REGISTRY).map(([k, v]) => [k, v.default])) as Record<FeatureKey, boolean>,
  loaded: false,
})) {
  private ts = inject(TransferState);
  private rc = inject(RemoteConfig);

  readonly isLoaded = this.select(s => s.loaded);
  readonly get = (k: FeatureKey) => this.select(s => s.values[k]);

  constructor() {
    super();

    const ssrSnapshot = this.ts.get(FLAG_SSR_KEY, null as any);
    if (ssrSnapshot) {
      this.patchState({ values: ssrSnapshot, loaded: true });
    } else {
      // Client: fetch remote config, then patch deterministically.
      // map RC values to typed flags
      fetchFlagsFromRemote(this.rc).then(remote => {
        const merged = { ...this.state().values, ...remote } as Record<FeatureKey, boolean>;
        this.patchState({ values: merged, loaded: true });
      }).catch(() => this.patchState({ loaded: true }));
    }

    // Telemetry impression per flag once loaded
    effect(() => {
      if (this.isLoaded()) {
        const v = this.state().values;
        sendFlagImpressions(v); // GA4/Otel
      }
    });
  }
}

async function fetchFlagsFromRemote(rc: RemoteConfig): Promise<Partial<Record<FeatureKey, boolean>>> {
  // map rc.getBoolean('flag_key') by convention
  return {
    signalsStore: getBoolean(rc, 'signalsStore'),
    viteSsrHydration: getBoolean(rc, 'viteSsrHydration'),
    primeNgDensityV2: getBoolean(rc, 'primeNgDensityV2'),
    kioskOfflineFlow: getBoolean(rc, 'kioskOfflineFlow'),
    adsMarketRollout: getBoolean(rc, 'adsMarketRollout'),
    telemetryV2: getBoolean(rc, 'telemetryV2'),
  };
}

// if-flag.directive.ts
import { Directive, Input, TemplateRef, ViewContainerRef, inject } from '@angular/core';
import { FeatureFlagsStore } from './feature-flags.store';
import { FeatureKey } from './feature-flags.model';

@Directive({ selector: '[ifFlag]' })
export class IfFlagDirective {
  private tpl = inject(TemplateRef<any>);
  private vcr = inject(ViewContainerRef);
  private flags = inject(FeatureFlagsStore);
  private hasView = false;

  @Input({ required: true }) set ifFlag(key: FeatureKey) {
    this.flags.get(key)(); // touch signal
    this.flags.effect(() => {
      const enabled = this.flags.get(key)();
      if (enabled && !this.hasView) { this.vcr.createEmbeddedView(this.tpl); this.hasView = true; }
      else if (!enabled && this.hasView) { this.vcr.clear(); this.hasView = false; }
    });
  }
}

// route guard (Angular 20 standalone)
import { CanMatchFn } from '@angular/router';
import { inject } from '@angular/core';
import { FeatureFlagsStore } from './feature-flags.store';

export const featureFlagGuard = (key: FeatureKey): CanMatchFn => () => {
  const flags = inject(FeatureFlagsStore);
  return flags.get(key)(); // boolean signal
};

<!-- Template usage -->
<button pButton *ifFlag="'primeNgDensityV2'" label="Try new density"></button>

Drive flags from CI with auditable history

# .github/workflows/flags-promote.yml
name: Promote Flags
on:
  workflow_dispatch:
    inputs:
      env:
        type: choice
        options: [staging, prod]
      flag:
        description: 'Feature key'
      value:
        description: 'true|false'
jobs:
  promote:
    runs-on: ubuntu-latest
    steps:
      - name: Set Firebase Remote Config
        env:
          GOOGLE_APPLICATION_CREDENTIALS: ${{ secrets.GCP_SA_JSON }}
          ENV: ${{ github.event.inputs.env }}
          FLAG: ${{ github.event.inputs.flag }}
          VALUE: ${{ github.event.inputs.value }}
        run: |
          echo "$GCP_SA_JSON" > sa.json
          gcloud auth activate-service-account --key-file=sa.json
          # Pseudo: call RC REST to set boolean
          curl -X PUT "https://firebaseremoteconfig.googleapis.com/v1/projects/$PROJECT/remoteConfig" \
            -H "Authorization: Bearer $(gcloud auth print-access-token)" \
            -H "Content-Type: application/json; charset=UTF-8" \
            -d @<(cat <<JSON
          { "parameters": { "$FLAG": { "defaultValue": { "value": "$VALUE" } } } }
          JSON
          )

Instrumentation: A/B tests and UX metrics

// telemetry.ts
type FlagImpression = { key: FeatureKey; value: boolean; userRole?: string; tenant?: string };

export function sendFlagImpressions(values: Record<FeatureKey, boolean>) {
  Object.entries(values).forEach(([key, value]) => {
    gtag('event', 'flag_impression', { key, value }); // or OTel
  });
}

• Measure: Core Web Vitals deltas (INP, CLS), hydration time, error rate per 1k sessions.
• Decide: expand flag when metrics are flat or improved for at least 24–48 hours.

Real-world upgrade patterns I’ve used

Feature flags weren’t “nice-to-have”—they were the difference between smooth upgrades and late-night rollbacks.

How an Angular Consultant Approaches Signals Migration with Flags

This is the fastest way to stabilize a chaotic codebase without freezing delivery—and why teams bring me in for Angular modernization.

When to Hire an Angular Developer for Legacy Rescue

I’ve rescued legacy JSP-to-Angular rewrites, AngularJS migrations, and zone.js-heavy apps by wrapping upgrades in typed flags, then peeling back risk one cohort at a time.

Tests, guardrails, and retiring flags

# Example: run e2e twice, toggling local flags
npx cypress run --env flags=primeNgDensityV2:on
npx cypress run --env flags=primeNgDensityV2:off