Code compatible serveur

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

/** Réduit le titre jusqu’à ce qu’il tienne sur une ligne. Sur le serveur, rien ne se passe. */
@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() {
    // Une fois, après le premier rendu, UNIQUEMENT dans le navigateur (sur le serveur, c’est un no-op).
    afterNextRender({
      // 1. earlyRead : lit le layout avant toute écriture
      earlyRead: () => {
        const el = this.title().nativeElement;
        return Math.min(1, el.clientWidth / el.scrollWidth); // 1 = ça tient
      },
      // 2. write : reçoit le résultat de la phase précédente et ne fait qu’écrire
      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() {
    // ✗ s’exécuterait après CHAQUE rendu de l’application, même si la liste n’a pas changé :
    // afterEveryRender({ write: () => this.scrollToBottom() });

    // ✓ s’exécute après le rendu uniquement quand les signals qu’il lit ont changé (toujours seulement dans le navigateur)
    afterRenderEffect({
      write: () => {
        this.messages(); // dépendance
        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';  — le module touche à window dès qu’il est importé :
//    le serveur plante au chargement du fichier, avant qu’aucun composant ne s’exécute.

@Component({
  selector: 'app-store-map',
  template: `<div #host class="map" aria-label="Carte des magasins"></div>`,
  // une hauteur fixe réserve aussi la place dans le HTML du serveur → pas de layout shift
  styles: `.map { height: 320px; }`,
})
export class StoreMap {
  private readonly host = viewChild.required<ElementRef<HTMLElement>>('host');
  private readonly destroyRef = inject(DestroyRef); // inject() uniquement en synchrone, pas après un await

  constructor() {
    afterNextRender(async () => {
      const L = await import('leaflet'); // chunk séparé, téléchargé uniquement dans le navigateur
      if (this.destroyRef.destroyed) return; // l’utilisateur est parti entre-temps
      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); // sur le serveur : le document Domino de la requête

  /** S’exécute aussi sur le serveur : la balise se retrouve dans le HTML que voient les crawlers. */
  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;
  }
}

// Pour <title> et <meta>, il existe déjà des services SSR-safe dans @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 vaut 'browser' ou 'server' ; ne le comparez pas à la main, utilisez les helpers de @angular/common
  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));

  track(event: string): void {
    if (!this.isBrowser) return; // ok : un effet de bord qui ne change pas ce qui est rendu
    navigator.sendBeacon('/collect', JSON.stringify({ event, at: Date.now() }));
  }
}

// ✗ PAS comme ça — le serveur et le navigateur rendent un contenu différent → layout shift et erreurs d’hydration :
//   @if (isBrowser) { <app-recommendations /> } @else { <p>Chargement…</p> }
// ✓ utilisez @defer (on viewport) ou afterNextRender pour ce qui n’a de sens que dans le navigateur.

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

// Le contrat : les composants ne dépendent que de la classe abstraite.
export abstract class AnalyticsService {
  abstract trackEvent(name: string): void;
}

@Injectable()
export class BrowserAnalyticsService implements AnalyticsService {
  trackEvent(name: string): void {
    navigator.sendBeacon('/collect', name); // API navigateur — autorisée ici
  }
}

@Injectable()
export class ServerAnalyticsService implements AnalyticsService {
  trackEvent(_name: string): void {
    // sur le serveur : rien (ou un log), pas d’API navigateur
  }
}

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

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

// Clé typée : TransferState sait qu’un Article se trouve dessous
const articleKey = (slug: string) => makeStateKey<Article>(`article:${slug}`);

@Service()
export class ArticleStore {
  private readonly cms = inject(CmsClient); // SDK avec son propre fetch → ne passe PAS par 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); // utilisé une seule fois : les navigations suivantes demandent des données fraîches
      return cached;
    }
    const article = await this.cms.getArticle(slug);
    if (this.isServer) this.state.set(key, article); // atterrit dans <script id="ng-state">
    return article;
  }
}

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

export const appConfig: ApplicationConfig = {
  providers: [
    // Le cache de transfert est ACTIVÉ par défaut avec provideClientHydration() ;
    // withHttpTransferCacheOptions ne fait que le régler.
    provideClientHydration(
      withHttpTransferCacheOptions({
        // quels en-têtes de réponse sont sauvegardés (par défaut : aucun)
        includeHeaders: ['ETag'],
        // false → la requête n’est pas mise en cache (données propres à l’utilisateur, données qui changent souvent)
        filter: (req) => !req.url.includes('/api/cart'),
        // POST en lecture seule (p. ex. GraphQL) — seulement s’ils sont idempotents
        includePostRequests: true,
        // false par défaut : les requêtes avec Authorization / Proxy-Authorization / Cookie sont ignorées
        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); // pas HttpClient → le cache HTTP ne le voit pas

  // v22 : avec un id, la valeur résolue sur le serveur est placée dans TransferState et réutilisée pendant l’hydration.
  // L’id doit être unique sur la page et identique sur le serveur et dans le navigateur.
  protected readonly forecast = resource({
    id: 'weather-bucharest',
    loader: () => this.sdk.forecast('Bucharest'),
  });
}

// api-base-url.ts — dans le navigateur : l’origine publique
export const API_BASE_URL = new InjectionToken<string>('API_BASE_URL', {
  factory: () => 'https://api.magazin.ro',
});

// app.config.server.ts (fragment) — sur le serveur : le réseau interne, sans passer par le load balancer
providers: [
  provideServerRendering(withRoutes(serverRoutes)),
  { provide: API_BASE_URL, useValue: 'http://catalog.internal:8080' },
  // les mêmes chemins sur les deux origines → les clés du cache de transfert correspondent
  // (uniquement dans la configuration serveur ; dans le navigateur, Angular lève une erreur s’il le trouve)
  {
    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); // ses propres promesses, pas HttpClient
  readonly price = signal<string | null>(null);

  // 1. run() : la stabilité attend la fin de la fonction asynchrone (developer preview)
  constructor() {
    this.tasks.run(async () => this.price.set(await this.sdk.priceOf(3)));
  }

  // 2. add() : contrôle manuel — N’OUBLIEZ PAS le nettoyage, sinon le serveur n’arrête jamais d’attendre
  async refresh(): Promise<void> {
    const done = this.tasks.add();
    try {
      this.price.set(await this.sdk.priceOf(3));
    } finally {
      done();
    }
  }

  // 3. pendingUntilEvent() : instable jusqu’à la première émission / complete / error (developer preview)
  readonly stock = toSignal(this.sdk.stock$(3).pipe(pendingUntilEvent()), { initialValue: 0 });
}

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

// Actif par défaut en mode dev quand vous utilisez provideClientHydration().
// Manuellement : pour du SSR sans hydration ou dans un build de production, temporairement.
bootstrapApplication(App, {
  providers: [provideStabilityDebugging()],
});
// Si l’application ne devient pas stable en ~9 s, elle journalise dans la console les PendingTasks
// qui la tiennent occupée. Avec Zone.js, importez aussi 'zone.js/plugins/task-tracking' pour obtenir des stack traces.

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

@Component({
  selector: 'app-product-missing',
  template: `<h1>Ce produit n’existe plus</h1><a href="/produse">Voir le catalogue</a>`,
})
export class ProductMissing {
  constructor() {
    // null dans le navigateur, pendant le prerender (SSG) et au build — d’où le ?.
    const response = inject(RESPONSE_INIT);
    if (response) response.status = 404; // sinon : un « soft 404 » est indexé comme une vraie 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 de la Web API ; null dans le navigateur / en SSG
  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));

  /** Langue préférée : l’en-tête sur le serveur, navigator dans le navigateur. */
  preferredLanguage(): string {
    if (this.request) return this.request.headers.get('accept-language')?.split(',')[0].trim() || 'fr';
    // pas de requête : navigateur OU prerender. NE testez PAS « typeof navigator » — Node 21+ l’a.
    return this.isBrowser ? navigator.language : 'fr';
  }

  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 sur le serveur : l’URL relative est résolue par rapport à l’URL de la requête courante
this.http.get('/api/products');          // → https://magazin.ro/api/products

// ✗ fetch() directement (ou un SDK qui l’utilise) — Node n’a pas de « page courante » :
await fetch('/api/products');            // TypeError: Failed to parse URL from /api/products

// ✓ si vous devez utiliser fetch() : construisez l’URL absolue à partir de la requête
const base = inject(REQUEST)?.url ?? inject(DOCUMENT).location.href;
await fetch(new URL('/api/products', base));

// ✗ État au niveau du module : le fichier est évalué UNE SEULE FOIS par processus Node,
//    donc les variables sont partagées par TOUTES les requêtes (et tous les utilisateurs).
let currentUser: User | null = null;          // l’utilisateur B voit l’utilisateur A
const cart = new Map<number, number>();       // le panier grossit à chaque requête

// ✗ Pareil avec useValue : l’objet est créé une seule fois, au chargement du module
{ provide: CART_STATE, useValue: { items: [] } }

// ✓ Un service : sur le serveur, chaque requête démarre une nouvelle application,
//    donc il obtient une nouvelle instance (détruite après la réponse).
@Service()
export class CartStore {
  private readonly items = signal<CartItem[]>([]);
  readonly count = computed(() => this.items().length);
}

// ✓ Ou useFactory : s’exécute pour chaque application créée
{ provide: CART_STATE, useFactory: () => ({ items: [] }) }

// Le ThemeStore de ce site (fragment). Le site est une SPA, donc il est correct ICI.
@Service()
export class ThemeStore {
  private readonly document = inject(DOCUMENT);
  // ✗ sur le serveur : defaultView est le window de Domino, qui n’a PAS de matchMedia → TypeError
  private readonly media = this.document.defaultView?.matchMedia('(prefers-color-scheme: dark)');

  // readStoredMode() lit localStorage dans un try/catch : sur le serveur, il ne plante pas,
  //    mais renvoie toujours 'system' — le serveur ne peut pas savoir ce que l’utilisateur a choisi.
  readonly mode = signal<ThemeMode>(readStoredMode());

  constructor() {
    this.media?.addEventListener('change', (e) => this.systemDark.set(e.matches));
    effect(() => {
      // ✓ DOM via DOCUMENT : fonctionne aussi sur le serveur
      // localStorage dans un try/catch : sur le serveur, il est ignoré en silence
    });
  }
}

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

  // Le serveur ne sait pas si le système est en mode sombre : pour 'system', c’est le CSS qui décide
  // (prefers-color-scheme), et le signal est corrigé dans le navigateur.
  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)'); // navigateur uniquement
      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();
      // s’exécute aussi sur le serveur → <html data-theme="dark"> est déjà dans le HTML, pas de flash
      const root = this.document.documentElement;
      if (mode === 'system') root.removeAttribute('data-theme');
      else root.setAttribute('data-theme', mode);
      // cookie (pas localStorage) : le serveur le reçoit à la requête suivante
      if (this.isBrowser) {
        this.document.cookie = `${COOKIE}=${mode}; path=/; max-age=31536000; samesite=lax`;
      }
    });
  }

  private readCookie(): ThemeMode {
    const raw = this.request?.headers.get('cookie') // serveur : l’en-tête de la requête
      ?? (this.isBrowser ? this.document.cookie : ''); // navigateur (sur le serveur, cookie lève une erreur)
    const value = raw
      .split('; ')
      .find((c) => c.startsWith(`${COOKIE}=`))
      ?.slice(COOKIE.length + 1);
    return value === 'light' || value === 'dark' ? value : 'system';
  }
}

<!-- L’alternative sans cookie (ce que fait ce site) : un script inline dans <head>,
     qui s’exécute avant le premier paint, dans n’importe quel mode de rendu (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>