Angular y Domino: Una combinación potente para Server-Side Rendering.

Si estás usando Angular y necesitas acceder al DOM con SSR, usa el paquete domino.

Domino ofrece soporte para la API del DOM y también selectores CSS para querySelector(), querySelectorAll() y matches().

Instala el paquete domino desde tu terminal:

npm install domino --save

Agrega Angular Universal a tu aplicación con ng add @nguniversal/express-engine. Edita el archivo server.ts y agrega las siguientes líneas. Para configurarlo, crea un objeto "document" y un "window" de forma global:

const domino = require('domino');
const fs = require('fs');
const path = require('path');
 
// Usa el index.html del navegador como plantilla para el objeto window simulado
const template = fs
  .readFileSync(path.join(join(process.cwd(), 'dist/yourprojectname/browser'), 'index.html'))
  .toString();
 
// Shim para los objetos globales window y document.
const window = domino.createWindow(template);
global['window'] = window;
global['document'] = window.document;

Si quieres copiar y pegar, por favor cambia el nombre del proyecto.

Ten en cuenta que para el renderizado del lado del servidor, el comando de compilación es build:ssr y necesitas publicar el directorio browser:

npm run build:ssr
dist/yourprojectname/browser