An Interest In:
Web News this Week
- April 26, 2024
- April 25, 2024
- April 24, 2024
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
Help my browser API's stopped working in Angular Universal
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 browserconst template = fs.readFileSync(path.join("dist/browser", "index.html")).toString();// Define all the global elementsconst 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
Original Link: https://dev.to/dailydevtips1/help-my-browser-api-s-stopped-working-in-angular-universal-10c1
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To