+-----------------------------------------------------------------------------------+
|                        LEGACY ANGULAR UNIVERSAL VS MODERN SSR                     |
|                                                                                   |
|  [ SCENARIO A: LEGACY ANGULAR UNIVERSAL (v15 and earlier) ]                       |
|  1. Node.js renders HTML string on server.                                        |
|  2. Browser paints initial server HTML on screen (Time: 350ms).                   |
|  3. Angular client bundle initializes & WIPES OUT ENTIRE DOM TREE! (DOM Tearing)  |
|  4. Client re-renders from scratch ──> Flashes blank screen; CLS jumps to 0.35!   |
|  5. Googlebot WRS parses duplicate DOM updates; event listeners broken!           |
|                                                                                   |
|  [ SCENARIO B: MODERN NATIVE @angular/ssr (v17 - v19) ]                           |
|  1. Server compiles components to static HTML with DOM node annotations.          |
|  2. Browser paints First Contentful Paint instantly.                              |
|  3. provideClientHydration() adopts existing DOM nodes without wiping HTML!       |
|  4. withEventReplay() records early user clicks & replays them after hydration!   |
|  5. ZERO layout shift! Instant Googlebot Wave 1 link discovery!                   |
+-----------------------------------------------------------------------------------+

// src/app/app.config.ts
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter, withComponentInputBinding } from '@angular/router';
import { provideClientHydration, withEventReplay, withHttpTransferCacheOptions } from '@angular/platform-browser';
import { provideHttpClient, withFetch } from '@angular/common/http';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    // 1. Optimize Zone.js change detection event coalescing
    provideZoneChangeDetection({ eventCoalescing: true }),

    // 2. Configure Angular Router
    provideRouter(routes, withComponentInputBinding()),

    // 3. Enable Native Non-Destructive Hydration with Event Replay
    provideClientHydration(
      withEventReplay(),
      withHttpTransferCacheOptions({
        includePostRequests: false,
      })
    ),

    // 4. Use native Fetch API for HTTP requests
    provideHttpClient(withFetch()),
  ],
};

// src/app/app.config.server.ts
import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
import { provideServerRendering } from '@angular/platform-server';
import { appConfig } from './app.config';

const serverConfig: ApplicationConfig = {
  providers: [
    provideServerRendering(),
  ],
};

export const config = mergeApplicationConfig(appConfig, serverConfig);

+-----------------------------------------------------------------------------------+
|                        HTTP TRANSFERSTATE CACHING FLOW                            |
|                                                                                   |
|  [ 1. SERVER EXECUTION (Node.js SSR) ] ───────────────────────────────────────────|
|  * Executes HTTP GET /api/products/laptop-pro.                                    |
|  * Injects response data into <script id="ng-state"> tag in HTML payload.         |
|                                                                                   |
|  [ 2. CLIENT HYDRATION (Browser) ] ──────────────────────────────────────────────|
|  * withHttpTransferCacheOptions() intercepts client HTTP request.                 |
|  * Reads cached JSON payload from <script id="ng-state"> tag instantly!          |
|  * ZERO duplicate network requests dispatched across the internet!               |
+-----------------------------------------------------------------------------------+

// src/app/pages/product-detail/product-detail.component.ts
import { Component, OnInit, inject } from '@angular/core';
import { Title, Meta } from '@angular/platform-browser';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-product-detail',
  standalone: true,
  template: `
    <article>
      <h1>{{ product.title }}</h1>
      <p class="price">\${{ product.price }}</p>
      <div [innerHTML]="product.description"></div>
    </article>
  `,
})
export class ProductDetailComponent implements OnInit {
  private titleService = inject(Title);
  private metaService = inject(Meta);
  private route = inject(ActivatedRoute);

  product: any;

  ngOnInit() {
    this.product = this.route.snapshot.data['product'];
    const canonicalUrl = `https://example.com/products/${this.product.slug}`;

    // 1. Set Primary SEO Metadata
    this.titleService.setTitle(`${this.product.title} | Acme Enterprise`);
    this.metaService.updateTag({ name: 'description', content: this.product.excerpt });

    // 2. Configure Canonical Link Tag
    this.metaService.updateTag({ rel: 'canonical', href: canonicalUrl });

    // 3. Set OpenGraph Social Protocol Tags
    this.metaService.updateTag({ property: 'og:title', content: this.product.title });
    this.metaService.updateTag({ property: 'og:description', content: this.product.excerpt });
    this.metaService.updateTag({ property: 'og:url', content: canonicalUrl });
    this.metaService.updateTag({ property: 'og:image', content: this.product.coverImage });
    this.metaService.updateTag({ property: 'og:type', content: 'product' });

    // 4. Set Twitter Card Metadata
    this.metaService.updateTag({ name: 'twitter:card', content: 'summary_large_image' });
  }
}

+-----------------------------------------------------------------------------------+
|                        ZONE.JS VS ZONELESS ANGULAR SIGNALS                        |
|                                                                                   |
|  [ TRADITIONAL ZONE.JS CHANGE DETECTION ]                                         |
|  * Monkey-patches all browser async microtasks and event listeners.               |
|  * Runs top-to-bottom change detection across entire component tree on any event! |
|  * High Total Blocking Time (TBT > 400ms) on low-end mobile devices.              |
|                                                                                   |
|  [ MODERN ZONELESS ANGULAR (Angular Signals: provideExperimentalZonelessChangeDetection) ]
|  * Zero zone.js polyfill bundle shipped to client (-35 KB JS payload!).           |
|  * Surgical, fine-grained reactivity updating only affected DOM nodes.            |
|  * Mobile INP latency drops below 20 ms!                                          |
+-----------------------------------------------------------------------------------+

// src/app/app.config.ts (Zoneless Angular Configuration)
import { provideExperimentalZonelessChangeDetection } from '@angular/core';

export const appConfig: ApplicationConfig = {
  providers: [
    provideExperimentalZonelessChangeDetection(),
    // ... other providers
  ],
};

// src/app/components/json-ld/json-ld.component.ts
import { Component, Input, OnInit, inject, SecurityContext } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'app-json-ld',
  standalone: true,
  template: `<div [innerHTML]="sanitizedSchema"></div>`,
})
export class JsonLdComponent implements OnInit {
  @Input({ required: true }) schemaData!: Record<string, any>;
  private sanitizer = inject(DomSanitizer);
  sanitizedSchema: SafeHtml = '';

  ngOnInit() {
    const rawJson = JSON.stringify(this.schemaData);
    const scriptString = `<script type="application/ld+json">${rawJson}</script>`;
    this.sanitizedSchema = this.sanitizer.bypassSecurityTrustHtml(scriptString);
  }
}

<!-- src/app/pages/product-detail/product-detail.component.html -->
<div class="hero-image-wrapper" style="position: relative; width: 100%; aspect-ratio: 16/9;">
  <img
    ngSrc="/assets/products/laptop-pro.webp"
    alt="High Performance Enterprise Laptop"
    width="1200"
    height="630"
    priority
    fetchpriority="high"
    class="hero-img"
  />
</div>

// server.ts (Angular SSR Server Endpoints)
import { APP_BASE_HREF } from '@angular/common';
import { CommonEngine } from '@angular/ssr/node';
import express from 'express';
import { fileURLToPath } from 'node:url';
import { dirname, join, resolve } from 'node:path';
import bootstrap from './src/main.server';

const server = express();
const serverDistFolder = dirname(fileURLToPath(import.meta.url));
const browserDistFolder = resolve(serverDistFolder, '../browser');
const indexHtml = join(serverDistFolder, 'index.server.html');

const commonEngine = new CommonEngine();

// 1. Dynamic XML Sitemap Endpoint
server.get('/sitemap.xml', async (req, res) => {
  const baseUrl = 'https://example.com';
  const products = await fetchAllPublishedProducts();

  const xml = `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url><loc>${baseUrl}</loc><priority>1.0</priority></url>
  <url><loc>${baseUrl}/pricing</loc><priority>0.9</priority></url>
  ${products.map((p) => `<url><loc>${baseUrl}/products/${p.slug}</loc><priority>0.8</priority></url>`).join('')}
</urlset>`;

  res.header('Content-Type', 'application/xml');
  res.send(xml);
});

// 2. RFC-9309 Compliant robots.txt Endpoint
server.get('/robots.txt', (req, res) => {
  res.type('text/plain');
  res.send(`User-agent: *
Allow: /
Disallow: /admin/
Disallow: /dashboard/

User-agent: GPTBot
User-agent: ClaudeBot
User-agent: PerplexityBot
Allow: /

Sitemap: https://example.com/sitemap.xml
`);
});

+-----------------------------------------------------------------------------------+
|                        BUGVISO ANGULAR AUDITING PIPELINE                          |
|                                                                                   |
|  [ Angular App Submitted ] ──> [ FastAPI + ARQ Redis Worker Cluster ]              |
|                                         │                                         |
|                                         ▼                                         |
|  [ PLAYWRIGHT HEADLESS CHROMIUM ] ────> [ 4 PARALLEL AUDITING ENGINES ]           |
|  * Discovers routerLink <a> tags        ├── 1. Hydration QA: Inspects DOM Tearing|
|  * Re-loads under Slow/Fast 3G profiles ├── 2. Speed: LCP, CLS & Sub-40ms INP     |
|  * Extracts Schema.org JSON-LD objects  ├── 3. SEO: Meta Service & Canonical QA   |
|  * Validates RFC-9309 robots.txt rules └── 4. GEO: /llms.txt & AI Citability Linter|
|                                         │                                         |
|                                         ▼                                         |
|  [ ACTIONABLE DEVELOPER REMEDIATION PLAYBOOK + BRANDED REPORTLAB PDF DELIVERABLES]|
+-----------------------------------------------------------------------------------+