ng add @nguniversal/express-engine

npm run dev:ssr
# hoặc build & serve
npm run build:ssr && npm run serve:ssr

// app.routes.ts
export const routes: Routes = [
  {
    path: '',
    loadComponent: () => import('./home.component').then(m => m.HomeComponent),
    data: {
      title: 'Trang Chủ — Nhanh và Dễ Tìm',
      description: 'Nội dung được render từ server với Angular 19 và Signals.',
    },
  },
];

// seo.service.ts
import { Injectable, inject } from '@angular/core';
import { Title, Meta } from '@angular/platform-browser';
import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
import { filter, map, mergeMap } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class SeoService {
  private router = inject(Router);
  private title = inject(Title);
  private meta = inject(Meta);
  private route = inject(ActivatedRoute);

  init() {
    this.router.events.pipe(
      filter(e => e instanceof NavigationEnd),
      map(() => {
        let r = this.route;
        while (r.firstChild) r = r.firstChild;
        return r;
      }),
      mergeMap(r => r.data)
    ).subscribe(d => {
      if (d['title']) this.title.setTitle(d['title']);
      if (d['description']) {
        this.meta.updateTag({ name: 'description', content: d['description'] });
      }
    });
  }
}

// jsonld.service.ts
import { DOCUMENT } from '@angular/common';
import { Injectable, Inject, Renderer2, RendererFactory2 } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class JsonLdService {
  private r: Renderer2;
  constructor(@Inject(DOCUMENT) private doc: Document, rf: RendererFactory2) {
    this.r = rf.createRenderer(null, null);
  }
  set(schema: object, id = 'app-jsonld') {
    const prev = this.doc.getElementById(id);
    if (prev) prev.remove();
    const script = this.r.createElement('script');
    script.type = 'application/ld+json';
    script.id = id;
    script.text = JSON.stringify(schema);
    this.r.appendChild(this.doc.head, script);
  }
}

jsonLd.set({
  '@context': 'https://schema.org',
  '@type': 'SoftwareApplication',
  name: 'Ứng dụng Mẫu',
  applicationCategory: 'BusinessApplication'
});

// search.component.ts
import { Component, signal, computed, effect, inject } from '@angular/core';
import { toObservable } from '@angular/core/rxjs-interop';
import { HttpClient } from '@angular/common/http';
import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';

@Component({
  standalone: true,
  selector: 'app-search',
  template: `
    <input
      type="search"
      placeholder="Tìm kiếm…"
      [value]="q()"
      (input)="q((($event.target as HTMLInputElement).value || '').trim())" />
    <ul>
      <li *ngFor="let r of results()">{{ r.name }}</li>
    </ul>
  `
})
export class SearchComponent {
  private http = inject(HttpClient);
  q = signal('');
  results = signal<{ name: string }[]>([]);

  // Kết nối Signal -> RxJS để debounce
  constructor() {
    toObservable(this.q).pipe(
      debounceTime(300),
      distinctUntilChanged(),
      switchMap(term =>
        term ? this.http.get<{ name: string }[]>(`/api/search?q=${encodeURIComponent(term)}`) : []
      )
    ).subscribe(data => this.results.set(Array.isArray(data) ? data : []));
  }
}

// server/api.ts
import express from 'express';
const app = express();

app.get('/api/search', (req, res) => {
  const q = String(req.query.q || '').toLowerCase();
  const db = ['Alpha', 'Beta', 'Gamma', 'Angular', 'Signals'].map(name => ({ name }));
  res.json(db.filter(x => x.name.toLowerCase().includes(q)));
});

app.listen(3000);