DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for DOM in Angular SSR with Domino package.
Dany Paredes
Dany Paredes

Posted on • Updated on

DOM in Angular SSR with Domino package.

If you are using angular need to access to 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
Enter fullscreen mode Exit fullscreen mode

Add angular universal in your app.

ng add @nguniversal/express-engine
Enter fullscreen mode Exit fullscreen mode

Edit the server.ts file and add the following lines, for configure it create "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;
Enter fullscreen mode Exit fullscreen mode

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

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

npm run build:ssr
dist/yourprojectname/browser
Enter fullscreen mode Exit fullscreen mode

Photo by Charl Folscher on Unsplash

Top comments (4)

Collapse
 
sabloger profile image
Saeed Falsafin

Where should I add these lines? I tested it in all of the server.ts scopes, but I get "ReferenceError: window is not defined" in all cases.
Is anything wrong with this line?:
global['window'] = window;

Collapse
 
omarsalem profile image
Omar Gameel Salem

very helpful! thanks!

Collapse
 
laxman2783 profile image
laxman2783

I have tried domino , but we are getting β€œNot yet Implemented” message
And
Event is undefined

Collapse
 
danywalls profile image
Dany Paredes

Please paste more details to try help u

All DEV content is created by the community!

Hey, if you're landing here for the first time, you should know that this website is a global community of folks who blog about their experiences to help folks like you out.

Sign up now if you're curious. It's free!