ReferenceError : XMLHttpRequest is not defined when running my angular 6 universal app

Question

I have made a Angular 6 project with dependency Angularfire2 . I am using firestore and firebase storage. I have converted my app to angular universal and when i run server.js it says listening on localhost:4000 but as soon as i open the browser with localhost:4200 the terminal shows the following error:

ReferenceError: XMLHttpRequest is not defined

here is the snippet of the error

Answer 1

Install these dependencies:

npm install --save-dev ws xmlhttprequest

Then add this to your server.ts file

(global as any).WebSocket = require('ws');
(global as any).XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest;

If you run into any other issue with SSR by using Firebase, check if this article already covers it.

Sources:

• https://angularfirebase.com/lessons/server-side-rendering-firebase-angular-universal/
• https://angularfirebase.com/snippets/angular-6-universal-simple-guide/