Harden AI‑Assisted Angular 20+ Prototypes: Feature Flags, Guarded Rollouts, and Observability You Can Ship This Week

The Friday demo that will page you by Sunday

As a senior Angular engineer, I start by assuming the AI feature will misbehave in prod. We build rails so it can’t take the entire app down.

Why ship AI with flags and telemetry in Angular 20+

Flag architecture you can trust

// flags.store.ts (Angular 20+, Signals)
import { Injectable, computed, effect, inject, signal } from '@angular/core';
import { RemoteConfig, getValue, fetchAndActivate } from '@angular/fire/remote-config';
import { interval } from 'rxjs';

export type FlagKey = 'ai.summarize.enabled' | 'ai.summarize.rolloutPct' | 'ai.summarize.killswitch' | 'telemetry.samplePct';

@Injectable({ providedIn: 'root' })
export class FlagsStore {
  private rc = inject(RemoteConfig);

  private loaded = signal(false);
  readonly enabled = signal(false);
  readonly rolloutPct = signal(0);
  readonly kill = signal(false);
  readonly telemetrySamplePct = signal(10);

  readonly aiActive = computed(() => this.loaded() && !this.kill() && this.enabled());

  constructor() {
    this.refresh();
    // Refresh periodically; RC fetch is cheap when not stale
    interval(60_000).subscribe(() => this.refresh());

    // Optional: log local changes
    effect(() => {
      if (!this.loaded()) return;
      console.debug('[flags] aiActive=%o pct=%o kill=%o', this.aiActive(), this.rolloutPct(), this.kill());
    });
  }

  async refresh() {
    await fetchAndActivate(this.rc).catch(() => void 0);
    this.enabled.set(this.bool('ai.summarize.enabled', false));
    this.rolloutPct.set(this.num('ai.summarize.rolloutPct', 0));
    this.kill.set(this.bool('ai.summarize.killswitch', false));
    this.telemetrySamplePct.set(this.num('telemetry.samplePct', 10));
    this.loaded.set(true);
  }

  private bool(k: FlagKey, d=false) { return this.val(k).asBoolean() ?? d; }
  private num(k: FlagKey, d=0) { return this.val(k).asNumber() ?? d; }
  private val(k: FlagKey) { return getValue(this.rc, k); }
}

<!-- In template: disable risky UI; show skeletons when flag off -->
<button pButton label="Summarize" [disabled]="!flags.aiActive()" (click)="summarize()"></button>
<p-skeleton *ngIf="!flags.aiActive()" width="12rem" height="2rem"></p-skeleton>

Observability that catches issues before users do

// telemetry.service.ts
import { Injectable } from '@angular/core';
import { trace } from '@opentelemetry/api';
import { FlagsStore } from './flags.store';

@Injectable({ providedIn: 'root' })
export class TelemetryService {
  private tracer = trace.getTracer('angularux-app');
  constructor(private flags: FlagsStore) {}

  summarizeRequested(id: string, model: string, tokens: number) {
    const span = this.tracer.startSpan('ai.summarize.request');
    span.setAttributes({ id, model, tokens, flag_enabled: this.flags.aiActive() });
    span.end();

    // Optionally forward to GA4/Firebase
    window.gtag?.('event', 'ai_summarize_request', { id, model, tokens });
  }

  summarizeCompleted(id: string, latencyMs: number, outTokens: number) {
    const span = this.tracer.startSpan('ai.summarize.complete');
    span.setAttributes({ id, latencyMs, outTokens });
    span.end();
  }

  summarizeError(id: string, code: string, stage: 'prompt'|'stream'|'render', http?: number) {
    const span = this.tracer.startSpan('ai.summarize.error');
    span.setAttributes({ id, code, stage, http, retried: false });
    span.end();
  }
}

Guarded rollouts with Nx CI and Firebase

# .github/workflows/canary.yml
name: canary-rollout
on:
  workflow_dispatch:
    inputs:
      rolloutPct:
        description: 'AI summarize rollout percentage (0-100)'
        required: true
        default: '5'
jobs:
  build-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20 }
      - run: npm ci
      - run: npx nx build web --configuration=production
      - name: Deploy preview
        run: npx firebase hosting:channel:deploy canary-$GITHUB_RUN_ID --expires 7d --project ${{ secrets.FB_PROJECT }}
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
      - name: Upload Remote Config
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
          FB_PROJECT: ${{ secrets.FB_PROJECT }}
        run: |
          jq \
            --argjson pct "${{ github.event.inputs.rolloutPct }}" \
            '.parameters["ai.summarize.rolloutPct"].defaultValue.numberValue = $pct' \
            rc-template.json > rc.json
          npx firebase remoteconfig:set rc.json --project $FB_PROJECT
      - name: E2E + Lighthouse
        run: |
          npx nx run web-e2e:e2e --baseUrl "$CANARY_URL"
          npx lhci autorun --collect.url="$CANARY_URL"

// rc-template.json (excerpt)
{
  "parameters": {
    "ai.summarize.enabled": { "defaultValue": { "value": "false" } },
    "ai.summarize.rolloutPct": { "defaultValue": { "numberValue": 0 } },
    "ai.summarize.killswitch": { "defaultValue": { "value": "false" } },
    "telemetry.samplePct": { "defaultValue": { "numberValue": 10 } }
  },
  "parameterGroups": {},
  "conditions": [
    { "name": "Staff", "expression": "auth.uid in [\"u_123\",\"u_456\"]" },
    { "name": "Canary5", "expression": "percent <= 5" }
  ]
}

Example: Flagged LLM Summarizer component

// summarize.component.ts
import { Component, inject, signal } from '@angular/core';
import { FlagsStore } from '../flags.store';
import { TelemetryService } from '../telemetry.service';

@Component({
  selector: 'app-summarize',
  templateUrl: './summarize.component.html'
})
export class SummarizeComponent {
  flags = inject(FlagsStore);
  t = inject(TelemetryService);

  loading = signal(false);
  output = signal('');

  async summarize() {
    if (!this.flags.aiActive()) return;
    const id = crypto.randomUUID();
    this.loading.set(true);
    this.t.summarizeRequested(id, 'gpt-4o-mini', 1500);
    try {
      const res = await fetch('/api/summary', { method: 'POST', body: JSON.stringify({ text: '...' }) });
      const start = performance.now();
      const data = await res.json();
      this.output.set(data.summary);
      this.t.summarizeCompleted(id, performance.now() - start, data.tokensOut ?? 0);
    } catch (e: any) {
      this.t.summarizeError(id, e?.code ?? 'unknown', 'render');
    } finally { this.loading.set(false); }
  }
}

<!-- summarize.component.html -->
<div class="panel">
  <button pButton label="Summarize" [disabled]="!flags.aiActive() || loading()" (click)="summarize()"></button>
  <p-skeleton *ngIf="!flags.aiActive()" width="16rem" height="2rem"></p-skeleton>
  <p-toast *ngIf="!flags.aiActive()" severity="info" text="AI in limited preview" life="4000"></p-toast>
  <pre *ngIf="output()">{{ output() }}</pre>
</div>

Rollback and SLOs you can defend

# One‑liner rollback to last good RC version (Firebase CLI)
LAST=$(firebase remoteconfig:versions:list --project $FB_PROJECT --limit 2 | awk 'NR==3{print $1}')
firebase remoteconfig:rollback $LAST --project $FB_PROJECT

When to Hire an Angular Developer to Harden AI Prototypes

Closing notes: measurable outcomes and next steps