Server-compatible code

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

/** Shrinks the title until it fits on one line. On the server nothing happens. */
@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() {
    // Once, after the first render, ONLY in the browser (on the server it's a no-op).
    afterNextRender({
      // 1. earlyRead: read the layout before any write
      earlyRead: () => {
        const el = this.title().nativeElement;
        return Math.min(1, el.clientWidth / el.scrollWidth); // 1 = it fits
      },
      // 2. write: receives the result of the previous phase and only writes
      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() {
    // ✗ would run after EVERY render of the application, even if the list hasn't changed:
    // afterEveryRender({ write: () => this.scrollToBottom() });

    // ✓ runs after rendering only when the signals it reads have changed (still only in the browser)
    afterRenderEffect({
      write: () => {
        this.messages(); // dependency
        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';  — the module touches window as soon as it is imported:
//    the server crashes when it loads the file, before any component runs.

@Component({
  selector: 'app-store-map',
  template: `<div #host class="map" aria-label="Store map"></div>`,
  // a fixed height reserves the space in the server HTML too → no layout shift
  styles: `.map { height: 320px; }`,
})
export class StoreMap {
  private readonly host = viewChild.required<ElementRef<HTMLElement>>('host');
  private readonly destroyRef = inject(DestroyRef); // inject() only synchronously, not after await

  constructor() {
    afterNextRender(async () => {
      const L = await import('leaflet'); // separate chunk, downloaded only in the browser
      if (this.destroyRef.destroyed) return; // the user left in the meantime
      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); // on the server: the Domino document of the request

  /** Also runs on the server: the tag ends up in the HTML that crawlers see. */
  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;
  }
}

// For <title> and <meta> there are already SSR-safe services in @angular/platform-browser:
//   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 is 'browser' or 'server'; don't compare it by hand, use the helpers from @angular/common
  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));

  track(event: string): void {
    if (!this.isBrowser) return; // ok: a side effect that doesn't change what is rendered
    navigator.sendBeacon('/collect', JSON.stringify({ event, at: Date.now() }));
  }
}

// ✗ NOT like this — server and browser render different content → layout shift and hydration errors:
//   @if (isBrowser) { <app-recommendations /> } @else { <p>Loading…</p> }
// ✓ use @defer (on viewport) or afterNextRender for what only makes sense in the browser.

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

// The contract: components depend only on the abstract class.
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 — allowed here
  }
}

@Injectable()
export class ServerAnalyticsService implements AnalyticsService {
  trackEvent(_name: string): void {
    // on the server: nothing (or a log), no 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 }

// Typed key: TransferState knows that an Article sits under it
const articleKey = (slug: string) => makeStateKey<Article>(`article:${slug}`);

@Service()
export class ArticleStore {
  private readonly cms = inject(CmsClient); // SDK with its own fetch → does NOT go through 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); // used only once: later navigations ask for fresh data
      return cached;
    }
    const article = await this.cms.getArticle(slug);
    if (this.isServer) this.state.set(key, article); // ends up in <script id="ng-state">
    return article;
  }
}

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

export const appConfig: ApplicationConfig = {
  providers: [
    // The transfer cache is ON by default with provideClientHydration();
    // withHttpTransferCacheOptions only tunes it.
    provideClientHydration(
      withHttpTransferCacheOptions({
        // which response headers are saved (default: none)
        includeHeaders: ['ETag'],
        // false → the request is not cached (per-user data, data that changes often)
        filter: (req) => !req.url.includes('/api/cart'),
        // read-only POSTs (e.g. GraphQL) — only if they are idempotent
        includePostRequests: true,
        // default false: requests with Authorization / Proxy-Authorization / Cookie are skipped
        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); // not HttpClient → the HTTP cache doesn't see it

  // v22: with an id, the value resolved on the server is put in TransferState and reused during hydration.
  // The id must be unique on the page and identical on the server and in the browser.
  protected readonly forecast = resource({
    id: 'weather-bucharest',
    loader: () => this.sdk.forecast('Bucharest'),
  });
}

// api-base-url.ts — in the browser: the public origin
export const API_BASE_URL = new InjectionToken<string>('API_BASE_URL', {
  factory: () => 'https://api.magazin.ro',
});

// app.config.server.ts (fragment) — on the server: the internal network, without going through the load balancer
providers: [
  provideServerRendering(withRoutes(serverRoutes)),
  { provide: API_BASE_URL, useValue: 'http://catalog.internal:8080' },
  // the same paths on both origins → the keys in the transfer cache match
  // (only in the server configuration; in the browser Angular throws an error if it finds it)
  {
    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); // its own promises, not HttpClient
  readonly price = signal<string | null>(null);

  // 1. run(): stability waits until the async function finishes (developer preview)
  constructor() {
    this.tasks.run(async () => this.price.set(await this.sdk.priceOf(3)));
  }

  // 2. add(): manual control — DON'T forget the cleanup, otherwise the server never stops waiting
  async refresh(): Promise<void> {
    const done = this.tasks.add();
    try {
      this.price.set(await this.sdk.priceOf(3));
    } finally {
      done();
    }
  }

  // 3. pendingUntilEvent(): unstable until the first emission / complete / error (developer preview)
  readonly stock = toSignal(this.sdk.stock$(3).pipe(pendingUntilEvent()), { initialValue: 0 });
}

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

// Active by default in dev mode when you use provideClientHydration().
// Manually: for SSR without hydration or in a production build, temporarily.
bootstrapApplication(App, {
  providers: [provideStabilityDebugging()],
});
// If the application doesn't become stable within ~9 s, it logs to the console the PendingTasks
// that are keeping it busy. With Zone.js, also import 'zone.js/plugins/task-tracking' for stack traces.

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

@Component({
  selector: 'app-product-missing',
  template: `<h1>This product no longer exists</h1><a href="/produse">See the catalog</a>`,
})
export class ProductMissing {
  constructor() {
    // null in the browser, during prerender (SSG) and at build time — that's why the ?.
    const response = inject(RESPONSE_INIT);
    if (response) response.status = 404; // otherwise: a "soft 404" gets indexed as a real page
  }
}

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

@Service()
export class RequestInfo {
  private readonly request = inject(REQUEST); // Request from the Web API; null in the browser / SSG
  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));

  /** Preferred language: the header on the server, navigator in the browser. */
  preferredLanguage(): string {
    if (this.request) return this.request.headers.get('accept-language')?.split(',')[0].trim() || 'en';
    // no request: browser OR prerender. DON'T test "typeof navigator" — Node 21+ has it.
    return this.isBrowser ? navigator.language : 'en';
  }

  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 on the server: the relative URL is resolved against the URL of the current request
this.http.get('/api/products');          // → https://magazin.ro/api/products

// ✗ fetch() directly (or an SDK that uses it) — Node has no "current page":
await fetch('/api/products');            // TypeError: Failed to parse URL from /api/products

// ✓ if you must use fetch(): build the absolute URL from the request
const base = inject(REQUEST)?.url ?? inject(DOCUMENT).location.href;
await fetch(new URL('/api/products', base));

// ✗ Module-level state: the file is evaluated ONCE per Node process,
//    so the variables are shared by ALL requests (and all users).
let currentUser: User | null = null;          // user B sees user A
const cart = new Map<number, number>();       // the cart grows with each request

// ✗ The same with useValue: the object is created once, when the module loads
{ provide: CART_STATE, useValue: { items: [] } }

// ✓ A service: on the server each request bootstraps a new application,
//    so it gets a new instance (which is destroyed after the response).
@Service()
export class CartStore {
  private readonly items = signal<CartItem[]>([]);
  readonly count = computed(() => this.items().length);
}

// ✓ Or useFactory: runs for each application that is created
{ provide: CART_STATE, useFactory: () => ({ items: [] }) }

// This site's ThemeStore (fragment). The site is an SPA, so it's correct HERE.
@Service()
export class ThemeStore {
  private readonly document = inject(DOCUMENT);
  // ✗ on the server: defaultView is the Domino window, which has NO matchMedia → TypeError
  private readonly media = this.document.defaultView?.matchMedia('(prefers-color-scheme: dark)');

  // readStoredMode() reads localStorage in a try/catch: on the server it doesn't crash,
  //    but it always returns 'system' — the server can't know what the user chose.
  readonly mode = signal<ThemeMode>(readStoredMode());

  constructor() {
    this.media?.addEventListener('change', (e) => this.systemDark.set(e.matches));
    effect(() => {
      // ✓ DOM through DOCUMENT: works on the server too
      // localStorage in try/catch: on the server it is silently ignored
    });
  }
}

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));

  // The server doesn't know whether the system is dark: for 'system' the CSS decides
  // (prefers-color-scheme), and the signal is corrected in the browser.
  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)'); // browser only
      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();
      // also runs on the server → <html data-theme="dark"> is already in the HTML, no flash
      const root = this.document.documentElement;
      if (mode === 'system') root.removeAttribute('data-theme');
      else root.setAttribute('data-theme', mode);
      // cookie (not localStorage): the server receives it on the next 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: the header of the request
      ?? (this.isBrowser ? this.document.cookie : ''); // browser (on the server, cookie throws)
    const value = raw
      .split('; ')
      .find((c) => c.startsWith(`${COOKIE}=`))
      ?.slice(COOKIE.length + 1);
    return value === 'light' || value === 'dark' ? value : 'system';
  }
}

<!-- The alternative without a cookie (what this site does): an inline script in <head>,
     which runs before the first paint, in any render mode (CSR, SSR, prerender). -->
<script>
  try {
    var t = localStorage.getItem('atlas-theme');
    if (t === 'light' || t === 'dark') document.documentElement.setAttribute('data-theme', t);
  } catch (e) {}
</script>