Servertauglicher Code

import { Component, ElementRef, afterNextRender, input, viewChild } from '@angular/core';

/** Verkleinert den Titel, bis er in eine Zeile passt. Auf dem Server passiert nichts. */
@Component({
  selector: 'app-fit-title',
  template: `<h2 #title class="fit">{{ text() }}</h2>`,
})
export class FitTitle {
  readonly text = input.required<string>();
  private readonly title = viewChild.required<ElementRef<HTMLElement>>('title');

  constructor() {
    // Einmal, nach dem ersten Rendern, NUR im Browser (auf dem Server ein No-op).
    afterNextRender({
      // 1. earlyRead: das Layout lesen, bevor geschrieben wird
      earlyRead: () => {
        const el = this.title().nativeElement;
        return Math.min(1, el.clientWidth / el.scrollWidth); // 1 = passt
      },
      // 2. write: erhält das Ergebnis der vorherigen Phase und schreibt nur
      write: (ratio) => {
        this.title().nativeElement.style.fontSize = `${Math.floor(32 * ratio)}px`;
      },
    });
  }
}

import { Component, ElementRef, afterRenderEffect, input, viewChild } from '@angular/core';

@Component({
  selector: 'app-chat-log',
  template: `
    <div #scroller class="messages">
      @for (m of messages(); track m.id) { <p>{{ m.text }}</p> }
    </div>
  `,
})
export class ChatLog {
  readonly messages = input.required<readonly { id: number; text: string }[]>();
  private readonly scroller = viewChild.required<ElementRef<HTMLElement>>('scroller');

  constructor() {
    // ✗ würde nach JEDEM Rendern der Anwendung laufen, auch wenn sich die Liste nicht geändert hat:
    // afterEveryRender({ write: () => this.scrollToBottom() });

    // ✓ läuft nach dem Rendern nur, wenn sich die gelesenen Signals geändert haben (weiterhin nur im Browser)
    afterRenderEffect({
      write: () => {
        this.messages(); // Abhängigkeit
        this.scrollToBottom();
      },
    });
  }

  private scrollToBottom(): void {
    const el = this.scroller().nativeElement;
    el.scrollTop = el.scrollHeight;
  }
}

import { Component, DestroyRef, ElementRef, afterNextRender, inject, viewChild } from '@angular/core';
// ✗ import * as L from 'leaflet';  — das Modul berührt window schon beim Import:
//    der Server stürzt beim Laden der Datei ab, noch bevor eine Komponente läuft.

@Component({
  selector: 'app-store-map',
  template: `<div #host class="map" aria-label="Karte der Geschäfte"></div>`,
  // eine feste Höhe reserviert den Platz auch im Server-HTML → kein Layout Shift
  styles: `.map { height: 320px; }`,
})
export class StoreMap {
  private readonly host = viewChild.required<ElementRef<HTMLElement>>('host');
  private readonly destroyRef = inject(DestroyRef); // inject() nur synchron, nicht nach await

  constructor() {
    afterNextRender(async () => {
      const L = await import('leaflet'); // eigener Chunk, nur im Browser geladen
      if (this.destroyRef.destroyed) return; // der Nutzer ist inzwischen weg
      const map = L.map(this.host().nativeElement).setView([44.4268, 26.1025], 12);
      this.destroyRef.onDestroy(() => map.remove());
    });
  }
}

import { DOCUMENT, Service, inject } from '@angular/core';

@Service()
export class CanonicalLink {
  private readonly document = inject(DOCUMENT); // auf dem Server: das Domino-Dokument des Requests

  /** Läuft auch auf dem Server: Das Tag landet im HTML, das Crawler sehen. */
  set(url: string): void {
    let link = this.document.head.querySelector<HTMLLinkElement>('link[rel="canonical"]');
    if (!link) {
      link = this.document.createElement('link');
      link.rel = 'canonical';
      this.document.head.appendChild(link);
    }
    link.href = url;
  }
}

// Für <title> und <meta> gibt es in @angular/platform-browser bereits SSR-sichere Services:
//   inject(Title).setTitle('Phone X — Store');
//   inject(Meta).updateTag({ name: 'description', content: '…' });

import { isPlatformBrowser } from '@angular/common';
import { PLATFORM_ID, Service, inject } from '@angular/core';

@Service()
export class Analytics {
  // PLATFORM_ID ist 'browser' oder 'server'; vergleiche es nicht von Hand, nimm die Helfer aus @angular/common
  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));

  track(event: string): void {
    if (!this.isBrowser) return; // ok: ein Seiteneffekt, der nicht ändert, was gerendert wird
    navigator.sendBeacon('/collect', JSON.stringify({ event, at: Date.now() }));
  }
}

// ✗ NICHT so — Server und Browser rendern unterschiedliche Inhalte → Layout Shift und Hydration-Fehler:
//   @if (isBrowser) { <app-recommendations /> } @else { <p>Lädt…</p> }
// ✓ Nimm @defer (on viewport) oder afterNextRender für das, was nur im Browser Sinn ergibt.

import { Injectable } from '@angular/core';

// Der Vertrag: Komponenten hängen nur von der abstrakten Klasse ab.
export abstract class AnalyticsService {
  abstract trackEvent(name: string): void;
}

@Injectable()
export class BrowserAnalyticsService implements AnalyticsService {
  trackEvent(name: string): void {
    navigator.sendBeacon('/collect', name); // Browser-API — hier erlaubt
  }
}

@Injectable()
export class ServerAnalyticsService implements AnalyticsService {
  trackEvent(_name: string): void {
    // auf dem Server: nichts (oder ein Log), keine Browser-APIs
  }
}

import { isPlatformServer } from '@angular/common';
import { PLATFORM_ID, Service, TransferState, inject, makeStateKey } from '@angular/core';

export interface Article { slug: string; title: string; body: string }

// Typisierter Schlüssel: TransferState weiß, dass darunter ein Article liegt
const articleKey = (slug: string) => makeStateKey<Article>(`article:${slug}`);

@Service()
export class ArticleStore {
  private readonly cms = inject(CmsClient); // SDK mit eigenem fetch → läuft NICHT über HttpClient
  private readonly state = inject(TransferState);
  private readonly isServer = isPlatformServer(inject(PLATFORM_ID));

  async load(slug: string): Promise<Article> {
    const key = articleKey(slug);
    const cached = this.state.get(key, null);
    if (cached) {
      this.state.remove(key); // nur einmal verwendet: spätere Navigationen holen frische Daten
      return cached;
    }
    const article = await this.cms.getArticle(slug);
    if (this.isServer) this.state.set(key, article); // landet in <script id="ng-state">
    return article;
  }
}

import { ApplicationConfig } from '@angular/core';
import { provideClientHydration, withHttpTransferCacheOptions } from '@angular/platform-browser';

export const appConfig: ApplicationConfig = {
  providers: [
    // Der Transfer-Cache ist mit provideClientHydration() standardmäßig AN;
    // withHttpTransferCacheOptions justiert ihn nur.
    provideClientHydration(
      withHttpTransferCacheOptions({
        // welche Response-Header gespeichert werden (Standard: keine)
        includeHeaders: ['ETag'],
        // false → der Request wird nicht gecacht (nutzerbezogene oder oft wechselnde Daten)
        filter: (req) => !req.url.includes('/api/cart'),
        // lesende POSTs (z. B. GraphQL) — nur wenn sie idempotent sind
        includePostRequests: true,
        // Standard false: Requests mit Authorization / Proxy-Authorization / Cookie werden übersprungen
        includeRequestsWithAuthHeaders: false,
      }),
    ),
  ],
};

import { Component, inject, resource } from '@angular/core';

@Component({ selector: 'app-weather', template: `{{ forecast.value()?.summary }}` })
export class Weather {
  private readonly sdk = inject(WeatherSdk); // nicht HttpClient → der HTTP-Cache sieht es nicht

  // v22: Mit einer id wird der auf dem Server aufgelöste Wert in den TransferState gelegt und bei der Hydration wiederverwendet.
  // Die id muss auf der Seite eindeutig und auf dem Server und im Browser identisch sein.
  protected readonly forecast = resource({
    id: 'weather-bucharest',
    loader: () => this.sdk.forecast('Bucharest'),
  });
}

// api-base-url.ts — im Browser: die öffentliche Origin
export const API_BASE_URL = new InjectionToken<string>('API_BASE_URL', {
  factory: () => 'https://api.magazin.ro',
});

// app.config.server.ts (Fragment) — auf dem Server: das interne Netz, ohne Umweg über den Load Balancer
providers: [
  provideServerRendering(withRoutes(serverRoutes)),
  { provide: API_BASE_URL, useValue: 'http://catalog.internal:8080' },
  // dieselben Pfade auf beiden Origins → die Schlüssel im Transfer-Cache stimmen überein
  // (nur in der Server-Konfiguration; im Browser wirft Angular einen Fehler, wenn es ihn findet)
  {
    provide: HTTP_TRANSFER_CACHE_ORIGIN_MAP,
    useValue: { 'http://catalog.internal:8080': 'https://api.magazin.ro' },
  },
];

import { Component, PendingTasks, inject, signal } from '@angular/core';
import { pendingUntilEvent, toSignal } from '@angular/core/rxjs-interop';

@Component({ selector: 'app-price', template: `{{ price() }} · {{ stock() }}` })
export class Price {
  private readonly tasks = inject(PendingTasks);
  private readonly sdk = inject(PricingSdk); // eigene Promises, nicht HttpClient
  readonly price = signal<string | null>(null);

  // 1. run(): Die Stabilität wartet, bis die async-Funktion fertig ist (Developer Preview)
  constructor() {
    this.tasks.run(async () => this.price.set(await this.sdk.priceOf(3)));
  }

  // 2. add(): manuelle Kontrolle — das Aufräumen NICHT vergessen, sonst hört der Server nie auf zu warten
  async refresh(): Promise<void> {
    const done = this.tasks.add();
    try {
      this.price.set(await this.sdk.priceOf(3));
    } finally {
      done();
    }
  }

  // 3. pendingUntilEvent(): instabil bis zur ersten Emission / complete / error (Developer Preview)
  readonly stock = toSignal(this.sdk.stock$(3).pipe(pendingUntilEvent()), { initialValue: 0 });
}

import { provideStabilityDebugging } from '@angular/core';

// Im Dev-Modus standardmäßig aktiv, wenn du provideClientHydration() verwendest.
// Manuell: für SSR ohne Hydration oder im Produktions-Build, vorübergehend.
bootstrapApplication(App, {
  providers: [provideStabilityDebugging()],
});
// Wird die Anwendung nicht innerhalb von ~9 s stabil, loggt sie in die Konsole die PendingTasks,
// die sie beschäftigt halten. Mit Zone.js zusätzlich 'zone.js/plugins/task-tracking' für Stack Traces importieren.

import { Component, RESPONSE_INIT, inject } from '@angular/core';

@Component({
  selector: 'app-product-missing',
  template: `<h1>Dieses Produkt gibt es nicht mehr</h1><a href="/produse">Zum Katalog</a>`,
})
export class ProductMissing {
  constructor() {
    // null im Browser, beim Prerendering (SSG) und zur Build-Zeit — deshalb das ?.
    const response = inject(RESPONSE_INIT);
    if (response) response.status = 404; // sonst wird ein „Soft 404“ als echte Seite indexiert
  }
}

import { isPlatformBrowser } from '@angular/common';
import { PLATFORM_ID, REQUEST, Service, inject } from '@angular/core';

@Service()
export class RequestInfo {
  private readonly request = inject(REQUEST); // Request der Web API; null im Browser / bei SSG
  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));

  /** Bevorzugte Sprache: der Header auf dem Server, navigator im Browser. */
  preferredLanguage(): string {
    if (this.request) return this.request.headers.get('accept-language')?.split(',')[0].trim() || 'de';
    // kein Request: Browser ODER Prerendering. NICHT "typeof navigator" prüfen — Node 21+ hat es.
    return this.isBrowser ? navigator.language : 'de';
  }

  cookie(name: string): string | null {
    const raw = this.request?.headers.get('cookie') ?? '';
    const match = raw.split('; ').find((c) => c.startsWith(`${name}=`));
    return match ? decodeURIComponent(match.slice(name.length + 1)) : null;
  }
}

// ✓ HttpClient auf dem Server: Die relative URL wird gegen die URL des aktuellen Requests aufgelöst
this.http.get('/api/products');          // → https://magazin.ro/api/products

// ✗ fetch() direkt (oder ein SDK, das es nutzt) — Node hat keine „aktuelle Seite“:
await fetch('/api/products');            // TypeError: Failed to parse URL from /api/products

// ✓ Wenn du fetch() verwenden musst: Baue die absolute URL aus dem Request
const base = inject(REQUEST)?.url ?? inject(DOCUMENT).location.href;
await fetch(new URL('/api/products', base));

// ✗ Zustand auf Modulebene: Die Datei wird EINMAL pro Node-Prozess ausgewertet,
//    also teilen ALLE Requests (und alle Nutzer) die Variablen.
let currentUser: User | null = null;          // Nutzer B sieht Nutzer A
const cart = new Map<number, number>();       // der Warenkorb wächst mit jedem Request

// ✗ Dasselbe mit useValue: Das Objekt wird einmal erzeugt, beim Laden des Moduls
{ provide: CART_STATE, useValue: { items: [] } }

// ✓ Ein Service: Auf dem Server startet jeder Request eine neue Anwendung,
//    also bekommt er eine neue Instanz (die nach der Response zerstört wird).
@Service()
export class CartStore {
  private readonly items = signal<CartItem[]>([]);
  readonly count = computed(() => this.items().length);
}

// ✓ Oder useFactory: läuft für jede erzeugte Anwendung
{ provide: CART_STATE, useFactory: () => ({ items: [] }) }

// ThemeStore dieser Seite (Fragment). Die Seite ist eine SPA, also ist er HIER korrekt.
@Service()
export class ThemeStore {
  private readonly document = inject(DOCUMENT);
  // ✗ auf dem Server: defaultView ist das Domino-Window, das KEIN matchMedia hat → TypeError
  private readonly media = this.document.defaultView?.matchMedia('(prefers-color-scheme: dark)');

  // readStoredMode() liest localStorage in einem try/catch: Auf dem Server stürzt es nicht ab,
  //    liefert aber immer 'system' — der Server kann nicht wissen, was der Nutzer gewählt hat.
  readonly mode = signal<ThemeMode>(readStoredMode());

  constructor() {
    this.media?.addEventListener('change', (e) => this.systemDark.set(e.matches));
    effect(() => {
      // ✓ DOM über DOCUMENT: funktioniert auch auf dem Server
      // localStorage in try/catch: Auf dem Server wird es stillschweigend ignoriert
    });
  }
}

import { isPlatformBrowser } from '@angular/common';
import {
  DOCUMENT, DestroyRef, PLATFORM_ID, REQUEST, Service,
  afterNextRender, computed, effect, inject, signal,
} from '@angular/core';

export type ThemeMode = 'system' | 'light' | 'dark';
const COOKIE = 'atlas-theme';

@Service()
export class ThemeStore {
  private readonly document = inject(DOCUMENT);
  private readonly request = inject(REQUEST);
  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));

  // Der Server weiß nicht, ob das System dunkel ist: Bei 'system' entscheidet das CSS
  // (prefers-color-scheme), und das Signal wird im Browser korrigiert.
  private readonly systemDark = signal(false);
  readonly mode = signal<ThemeMode>(this.readCookie());
  readonly isDark = computed(
    () => this.mode() === 'dark' || (this.mode() === 'system' && this.systemDark()),
  );

  constructor() {
    const destroyRef = inject(DestroyRef);
    afterNextRender(() => {
      const media = matchMedia('(prefers-color-scheme: dark)'); // nur Browser
      const onChange = (e: MediaQueryListEvent) => this.systemDark.set(e.matches);
      this.systemDark.set(media.matches);
      media.addEventListener('change', onChange);
      destroyRef.onDestroy(() => media.removeEventListener('change', onChange));
    });

    effect(() => {
      const mode = this.mode();
      // läuft auch auf dem Server → <html data-theme="dark"> steht schon im HTML, kein Flackern
      const root = this.document.documentElement;
      if (mode === 'system') root.removeAttribute('data-theme');
      else root.setAttribute('data-theme', mode);
      // Cookie (nicht localStorage): Der Server erhält es beim nächsten Request
      if (this.isBrowser) {
        this.document.cookie = `${COOKIE}=${mode}; path=/; max-age=31536000; samesite=lax`;
      }
    });
  }

  private readCookie(): ThemeMode {
    const raw = this.request?.headers.get('cookie') // Server: der Header des Requests
      ?? (this.isBrowser ? this.document.cookie : ''); // Browser (auf dem Server wirft cookie)
    const value = raw
      .split('; ')
      .find((c) => c.startsWith(`${COOKIE}=`))
      ?.slice(COOKIE.length + 1);
    return value === 'light' || value === 'dark' ? value : 'system';
  }
}

<!-- Die Alternative ohne Cookie (so macht es diese Seite): ein Inline-Script in <head>,
     das vor dem ersten Paint läuft, in jedem Render-Modus (CSR, SSR, Prerendering). -->
<script>
  try {
    var t = localStorage.getItem('atlas-theme');
    if (t === 'light' || t === 'dark') document.documentElement.setAttribute('data-theme', t);
  } catch (e) {}
</script>