Build a Streaming Gemini Chat in Angular with Signals — Then Ship It on Cloud Run

dStop) eliminates AbortController` race conditions, ensuring clean async generator teardown.

• The architecture naturally supports mid-update state visibility, making in-flight token buffers first-class citizens alongside committed history.

Core Solution

Project Setup

Initialize a standalone Angular project with CSS styling and no routing or tests. Install the official Google AI SDK.

ng new gemini-stream --standalone --routing=false --style=css --skip-tests
cd gemini-stream
npm i @google/genai

Configure environment variables for local development. Note: Client-side API keys are acceptable for local exploration but must be abstracted in production.

export const environment = {
  geminiApiKey: 'YOUR_AI_STUDIO_KEY_HERE',
};

Opt into zoneless change detection in app.config.ts to enable per-signal update paths:

import { ApplicationConfig, provideZonelessChangeDetection } from '@angular/core';

export const appConfig: ApplicationConfig = {
  providers: [provideZonelessChangeDetection()],
};

The Gemini Service

The service encapsulates SDK interaction, yielding plain text deltas while exposing a deterministic stop predicate. This keeps the component decoupled from SDK-specific types.

import { Injectable } from '@angular/core';
import { GoogleGenAI } from '@google/genai';
import { environment } from '../environments/environment';

export type ChatRole = 'user' | 'model';
export interface ChatMessage {
  role: ChatRole;
  content: string;
}

@Injectable({ providedIn: 'root' })
export class GeminiService {
  private ai = new GoogleGenAI({ apiKey: environment.geminiApiKey });

  async *stream(
    history: ChatMessage[],
    shouldStop: () => boolean = () => false,
  ): AsyncGenerator<string> {
    const response = await this.ai.models.generateContentStream({
      model: 'gemini-2.5-flash',
      contents: history.map((m) => ({
        role: m.role,
        parts: [{ text: m.content }],
      })),
    });

    for await (const chunk of response) {
      if (shouldStop()) return;
      const text = chunk.text;
      if (text) yield text;
    }
  }
}

Signals-based Chat State

The component leverages signals for state, computed properties for validation, and effects for DOM synchronization. The for await loop directly mutates the streaming buffer, triggering minimal, targeted view updates.

import {
  ChangeDetectionStrategy,
  Component,
  computed,
  effect,
  inject,
  signal,
  viewChild,
  ElementRef,
} from '@angular/core';
import { GeminiService, ChatMessage } from './gemini.service';

@Component({
  selector: 'app-chat',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<!-- coming up next -->`,
  styles: [`/* coming up next */`],
})
export class ChatComponent {
  private gemini = inject(GeminiService);

  readonly messages = signal<ChatMessage[]>([]);
  readonly draft = signal('');
  readonly streaming = signal('');
  readonly isStreaming = signal(false);
  readonly stopRequested = signal(false);

  readonly canSend = computed(
    () => this.draft().trim().length > 0 && !this.isStreaming(),
  );

  private scroller = viewChild<ElementRef<HTMLDivElement>>('scroller');

  constructor() {
    effect(() => {
      // Read the streaming buffer and message count to re-trigger on every update,
      // then scroll to the bottom on the next animation frame.
      this.streaming();
      this.messages().length;
      const el = this.scroller()?.nativeElement;
      if (el) requestAnimationFrame(() => (el.scrollTop = el.scrollHeight));
    });
  }

  async send() {
    if (!this.canSend()) return;

    const userMessage: ChatMessage = { role: 'user', content: this.draft().trim() };
    this.messages.update((m) => [...m, userMessage]);
    this.draft.set('');
    this.streaming.set('');
    this.isStreaming.set(true);
    this.stopRequested.set(false);

    try {
      for await (const delta of this.gemini.stream(
        this.messages(),
        () => this.stopRequested(),
      )) {
        this.streaming.update((s) => s + delta);
      }
    } catch (err) {
      this.streaming.update((s) => s + `\n

Pitfall Guide

1. Exposing API Keys in Client Bundles: Embedding geminiApiKey in environment.ts works locally but leaks credentials in production. Best Practice: Route requests through a Cloud Run proxy or backend function that injects the key server-side.
2. Skipping Zoneless Configuration: Forgetting provideZonelessChangeDetection() in app.config.ts forces Angular to fall back to zone-based tracking, negating signal performance gains. Best Practice: Always verify zoneless provider registration when adopting signals for high-frequency updates.
3. Race Conditions in Stream Cancellation: Using AbortController directly with async generators can leave network sockets open or cause unhandled promise rejections. Best Practice: Use a signal-driven predicate (shouldStop) evaluated at the start of each loop iteration for deterministic, safe teardown.
4. Layout Thrashing in Scroll Effects: Directly reading and writing scrollTop inside an effect without deferral causes forced synchronous layouts. Best Practice: Wrap DOM mutations in requestAnimationFrame to batch reads/writes and align with the browser's paint cycle.
5. Leaking SDK Types into Components: Yielding raw GenerateContentResponse chunks couples the UI to SDK internals, complicating testing and future migrations. Best Practice: Transform deltas to plain strings in the service layer before they reach the component.
6. Ignoring Async Generator Cleanup: Failing to return from the generator when cancellation is requested leaves the HTTP stream open, wasting bandwidth and API quota. Best Practice: Always check the stop predicate early in the for await loop and exit cleanly.
7. Overusing effect() for Business Logic: Effects should only handle side effects (DOM, logging, external sync). Tying core state transitions to effects breaks predictability. Best Practice: Keep state mutations synchronous and explicit; reserve effects for UI synchronization and external integrations.

Deliverables

• Architecture Blueprint: Client-side Angular app (Signals + Zoneless) → Cloud Run Proxy (Node.js/Express) → Gemini API. The proxy handles authentication, rate limiting, and CORS, ensuring zero secret exposure in the frontend bundle.
• Deployment Checklist:
  • Configure provideZonelessChangeDetection() in app.config.ts
  • Replace client-side API key with Cloud Run proxy endpoint
  • Implement shouldStop predicate for deterministic stream cancellation
  • Add requestAnimationFrame guard in scroll effects
  • Containerize proxy service with Dockerfile and deploy to Cloud Run
  • Set ALLOW_UNAUTHENTICATED=true only if proxy validates origin/IP
• Configuration Templates:
  • app.config.ts: Zoneless provider setup
  • environment.ts: Local dev key placeholder (gitignored)
  • proxy/server.js: Express route forwarding /api/chat to Gemini with server-side key injection and Content-Type: text/event-stream support
  • Dockerfile: Multi-stage build for Angular static assets + Node proxy runtime