Dany Paredes
Dany Paredes | Javascript / Web

Dany Paredes | Javascript / Web

DOM in Angular SSR with Domino package.

DOM in Angular SSR with Domino package.

Dany Paredes's photo
Dany Paredes
·Sep 13, 2020·

1 min read

Subscribe to my newsletter and never miss my upcoming articles

Play this article

If you are using angular need to access DOM with SSR, then use domino package.

Domino provide support for the DOM API and also CSS for querySelector(), querySelectorAll(), and matches().

Install domino from your terminal.

npm install domino --save

Add angular universal in your app.

ng add @nguniversal/express-engine

Edit the server.ts file and add the following lines. For configuring it create a "document" object and "window" as global.

const domino = require('domino');
const fs = require('fs');
const path = require('path');

// Use the browser index.html as template for the mock window
const template = fs
  .readFileSync(path.join(join(process.cwd(), 'dist/yourprojectname/browser'), 'index.html'))
  .toString();

// Shim for the global window and document objects.
const window = domino.createWindow(template);
global['window'] = window;
global['document'] = window.document;

If you to copy and paste, please change the project name.

Keep in mind that change for server-side render the build command is built:ssr and needs to publish the browser directory.

npm run build:ssr
dist/yourprojectname/browser

Photo by Charl Folscher on Unsplash

 
Share this