Cod compatibil cu serverul

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

/** Micșorează titlul până încape pe un rând. Pe server nu se întâmplă nimic. */
@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() {
    // O singură dată, după prima randare, DOAR în browser (pe server e NOOP).
    afterNextRender({
      // 1. earlyRead: citește layout-ul înaintea oricărei scrieri
      earlyRead: () => {
        const el = this.title().nativeElement;
        return Math.min(1, el.clientWidth / el.scrollWidth); // 1 = încape
      },
      // 2. write: primește rezultatul fazei anterioare și doar scrie
      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() {
    // ✗ ar rula după FIECARE randare a aplicației, chiar dacă lista nu s-a schimbat:
    // afterEveryRender({ write: () => this.scrollToBottom() });

    // ✓ rulează după randare doar când semnalele citite s-au schimbat (tot doar în browser)
    afterRenderEffect({
      write: () => {
        this.messages(); // dependență
        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';  — modulul atinge window încă de la import:
//    serverul cade când încarcă fișierul, înainte să ruleze vreo componentă.

@Component({
  selector: 'app-store-map',
  template: `<div #host class="map" aria-label="Harta magazinelor"></div>`,
  // înălțimea fixă rezervă spațiul și în HTML-ul de pe server → fără layout shift
  styles: `.map { height: 320px; }`,
})
export class StoreMap {
  private readonly host = viewChild.required<ElementRef<HTMLElement>>('host');
  private readonly destroyRef = inject(DestroyRef); // inject() doar sincron, nu după await

  constructor() {
    afterNextRender(async () => {
      const L = await import('leaflet'); // chunk separat, descărcat doar în browser
      if (this.destroyRef.destroyed) return; // utilizatorul a plecat între timp
      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); // pe server: documentul Domino al request-ului

  /** Rulează și pe server: tag-ul ajunge în HTML-ul văzut de crawlere. */
  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;
  }
}

// Pentru <title> și <meta> există deja servicii SSR-safe în @angular/platform-browser:
//   inject(Title).setTitle('Telefon X — Magazin');
//   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 e 'browser' sau 'server'; nu-l compara manual, folosește helper-ele din @angular/common
  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));

  track(event: string): void {
    if (!this.isBrowser) return; // ok: un efect secundar care nu schimbă ce se randează
    navigator.sendBeacon('/collect', JSON.stringify({ event, at: Date.now() }));
  }
}

// ✗ NU așa — server și browser randează conținut diferit → layout shift și erori de hidratare:
//   @if (isBrowser) { <app-recommendations /> } @else { <p>Se încarcă…</p> }
// ✓ folosește @defer (on viewport) sau afterNextRender pentru ce e doar de browser.

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

// Contractul: componentele depind doar de clasa abstractă.
export abstract class AnalyticsService {
  abstract trackEvent(name: string): void;
}

@Injectable()
export class BrowserAnalyticsService implements AnalyticsService {
  trackEvent(name: string): void {
    navigator.sendBeacon('/collect', name); // API de browser — aici e voie
  }
}

@Injectable()
export class ServerAnalyticsService implements AnalyticsService {
  trackEvent(_name: string): void {
    // pe server: nimic (sau un log), fără API-uri de browser
  }
}

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

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

// Cheie tipizată: TransferState știe că sub ea stă un Article
const articleKey = (slug: string) => makeStateKey<Article>(`article:${slug}`);

@Service()
export class ArticleStore {
  private readonly cms = inject(CmsClient); // SDK cu fetch propriu → NU trece prin 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); // folosită o singură dată: navigările ulterioare cer date proaspete
      return cached;
    }
    const article = await this.cms.getArticle(slug);
    if (this.isServer) this.state.set(key, article); // ajunge în <script id="ng-state">
    return article;
  }
}

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

export const appConfig: ApplicationConfig = {
  providers: [
    // Cache-ul de transfer e PORNIT implicit de provideClientHydration();
    // withHttpTransferCacheOptions doar îl reglează.
    provideClientHydration(
      withHttpTransferCacheOptions({
        // ce header-e ale răspunsului se salvează (implicit: niciunul)
        includeHeaders: ['ETag'],
        // false → requestul nu intră în cache (date per utilizator, date care se schimbă des)
        filter: (req) => !req.url.includes('/api/cart'),
        // POST-uri de citire (ex. GraphQL) — doar dacă sunt idempotente
        includePostRequests: true,
        // implicit false: request-urile cu Authorization / Proxy-Authorization / Cookie sunt sărite
        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); // nu e HttpClient → cache-ul HTTP nu-l vede

  // v22: id → valoarea rezolvată pe server e pusă în TransferState și refolosită la hidratare.
  // id-ul trebuie să fie unic pe pagină și identic pe server și în browser.
  protected readonly forecast = resource({
    id: 'weather-bucharest',
    loader: () => this.sdk.forecast('Bucharest'),
  });
}

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

// app.config.server.ts (fragment) — pe server: rețeaua internă, fără drum prin load balancer
providers: [
  provideServerRendering(withRoutes(serverRoutes)),
  { provide: API_BASE_URL, useValue: 'http://catalog.internal:8080' },
  // aceleași căi pe ambele origini → cheile din cache-ul de transfer se potrivesc
  // (doar în configurația de server; în browser Angular aruncă eroare dacă îl găsește)
  {
    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); // promisiuni proprii, nu HttpClient
  readonly price = signal<string | null>(null);

  // 1. run(): stabilitatea așteaptă până se termină funcția async (developer preview)
  constructor() {
    this.tasks.run(async () => this.price.set(await this.sdk.priceOf(3)));
  }

  // 2. add(): control manual — NU uita cleanup-ul, altfel serverul nu mai răspunde
  async refresh(): Promise<void> {
    const done = this.tasks.add();
    try {
      this.price.set(await this.sdk.priceOf(3));
    } finally {
      done();
    }
  }

  // 3. pendingUntilEvent(): instabil până la prima emisie / complete / eroare (developer preview)
  readonly stock = toSignal(this.sdk.stock$(3).pipe(pendingUntilEvent()), { initialValue: 0 });
}

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

// Activ implicit în dev mode când folosești provideClientHydration().
// Manual: pentru SSR fără hidratare sau într-un build de producție, temporar.
bootstrapApplication(App, {
  providers: [provideStabilityDebugging()],
});
// Dacă aplicația nu devine stabilă în ~9 s, afișează în consolă task-urile din PendingTasks
// care o țin pe loc. Cu Zone.js, importă și 'zone.js/plugins/task-tracking' pentru stack-uri.

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

@Component({
  selector: 'app-product-missing',
  template: `<h1>Produsul nu mai există</h1><a href="/produse">Vezi catalogul</a>`,
})
export class ProductMissing {
  constructor() {
    // null în browser, la prerender (SSG) și la build — de aceea ?.
    const response = inject(RESPONSE_INIT);
    if (response) response.status = 404; // altfel: „soft 404” indexat ca pagină reală
  }
}

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

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

  /** Limba preferată: header-ul pe server, navigator în browser. */
  preferredLanguage(): string {
    if (this.request) return this.request.headers.get('accept-language')?.split(',')[0].trim() || 'ro';
    // fără request: browser SAU prerender. NU testa „typeof navigator” — Node 21+ îl are.
    return this.isBrowser ? navigator.language : 'ro';
  }

  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 pe server: URL-ul relativ e rezolvat față de URL-ul request-ului curent
this.http.get('/api/products');          // → https://magazin.ro/api/products

// ✗ fetch() direct (sau un SDK care îl folosește) — Node nu are „pagină curentă”:
await fetch('/api/products');            // TypeError: Failed to parse URL from /api/products

// ✓ dacă trebuie fetch(): construiește URL-ul absolut din request
const base = inject(REQUEST)?.url ?? inject(DOCUMENT).location.href;
await fetch(new URL('/api/products', base));

// ✗ Starea la nivel de modul: fișierul e evaluat O SINGURĂ DATĂ per proces Node,
//    deci variabilele sunt comune TUTUROR request-urilor (și tuturor utilizatorilor).
let currentUser: User | null = null;          // utilizatorul B îl vede pe A
const cart = new Map<number, number>();       // coșul crește cu fiecare request

// ✗ La fel cu useValue: obiectul e creat o dată, la încărcarea modulului
{ provide: CART_STATE, useValue: { items: [] } }

// ✓ Un serviciu: pe server fiecare request bootstrap-ează o aplicație nouă,
//    deci primește o instanță nouă (și e distrusă după răspuns).
@Service()
export class CartStore {
  private readonly items = signal<CartItem[]>([]);
  readonly count = computed(() => this.items().length);
}

// ✓ Sau useFactory: rulează pentru fiecare aplicație creată
{ provide: CART_STATE, useFactory: () => ({ items: [] }) }

// ThemeStore-ul acestui site (fragment). Site-ul e SPA, deci e corect AICI.
@Service()
export class ThemeStore {
  private readonly document = inject(DOCUMENT);
  // ✗ pe server: defaultView e fereastra Domino, care NU are matchMedia → TypeError
  private readonly media = this.document.defaultView?.matchMedia('(prefers-color-scheme: dark)');

  // readStoredMode() citește localStorage într-un try/catch: pe server nu cade,
  //    dar întoarce mereu 'system' — serverul nu poate ști ce a ales utilizatorul.
  readonly mode = signal<ThemeMode>(readStoredMode());

  constructor() {
    this.media?.addEventListener('change', (e) => this.systemDark.set(e.matches));
    effect(() => {
      // ✓ DOM prin DOCUMENT: merge și pe server
      // localStorage în try/catch: pe server e ignorat în tăcere
    });
  }
}

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

  // Serverul nu știe dacă sistemul e dark: pentru 'system' decide CSS-ul
  // (prefers-color-scheme), iar semnalul se corectează în 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)'); // doar în 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();
      // rulează și pe server → <html data-theme="dark"> pleacă deja în HTML, fără flash
      const root = this.document.documentElement;
      if (mode === 'system') root.removeAttribute('data-theme');
      else root.setAttribute('data-theme', mode);
      // cookie (nu localStorage): îl primește serverul la următorul 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: header-ul request-ului
      ?? (this.isBrowser ? this.document.cookie : ''); // browser (pe server, cookie aruncă)
    const value = raw
      .split('; ')
      .find((c) => c.startsWith(`${COOKIE}=`))
      ?.slice(COOKIE.length + 1);
    return value === 'light' || value === 'dark' ? value : 'system';
  }
}

<!-- Alternativa fără cookie (ce face acest site): un script inline în <head>,
     care rulează înainte de prima afișare, în orice mod de randare (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>