How to validate if is a browser on the server side without window reference?

Question

I'm working on angular application that have SSR integration with angular universal. On this project we use a plug-in for some steppers (bs-stepper). The issue is that this plug-in have a multiple window reference like this:

var matches = window.Element.prototype.matches;

I need a way to validate that is a browser or not, a tried multiple options like "detect" and "navigator".

If you need to know if `window` exists or not, just check for `window`. That being said, node will always have a global variable named `process` that is *usually* not present in the browser. — Jared Smith, Jun 08 '20 at 19:44

score 5 · Answer 1 · answered Jun 09 '20 at 06:45

You can use isPlatformBrowser

component.ts

import { PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

//...
private isBrowser: boolean;

constructor( @Inject(PLATFORM_ID) platformId: Object) {
   this.isBrowser = isPlatformBrowser(platformId);
  }
}

You can also try using domino in server.ts for when you don't have control over where browser elements are used (e.g. when using 3rs party libraries)

How to validate if is a browser on the server side without window reference?

1 Answers1