Help my browser API's stopped working in Angular Universal

— 3 minute read

Yesterday we looked at introducing Angular Universal to our Angular application. But if you're like me and used some browser API's for specific tasks, you might be regretting the choice since they stopped working.

No fear, we can make them work!

Some more background as to what's happening, we added Angular Universal, so our application is first being served server-side, and the server has no idea about browser API's.

Hence we need to make him aware or temporarily stop these browser API's from executing on the server-side.

Converting browser API's in Angular Universal server

So let's introduce a simple browser API in our application to see if it will break.

We'll introduce a simple window command to open a URL. So let's open welcome.component.ts and add the following function.

openLink(): void {
	window.open("https://daily-dev-tips.com", "_blank");
}

Note: This is a very basic example, but it should give you an understanding of what will go wrong and how we can fix it.

Now we need to add a button to the welcome.component.html file.

<button (click)="openLink()">Open link</button>

Now, this could give us an error as such:

window is not defined

Or something like:

document is not defined

And it makes sense. These are browser API's, so Node has no idea what we are talking about.

We can however, install domino, which is a browser for Node.

npm install domino

And then, we can add the missing elements to our server.ts file as such.

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

// Mock a temporary browser
const template = fs.readFileSync(path.join("dist/browser", "index.html")).toString();

// Define all the global elements
const window = domino.createWindow(template);
global["window"] = window;
global["document"] = window.document;
global["branch"] = null;
global["object"] = window.object;

And there you go, we can now use the native window or document calls again!

Do note in our example app that the script is so small that you hardly get to see the server-side rendering, so it might not throw errors at runtime.

You can find today's code in the following GitHub repo.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter