Angular JSS - References to Window Break In Experience Editor

Question

I have a couple references to the window object in my Angular JSS component:

  @HostListener('window:resize', ['$event'])
  onResize(event) {
    if (window && typeof window !== 'undefined') {
      this.width = window.innerWidth;
    }
  }

and

  ngOnInit() {
    if (window && typeof window !== 'undefined') {
          this.width = window.innerWidth;
     }
  }

Even with the null/undefined check, either of these two blocks causes the Experience Editor to throw errors when a component is added to a page:

Uncaught Loaded unexpected element while trying to get rendering html from server. Expecting last tag to be closing script marker

Answer 1

Figured out how to resolve this:

I needed to import isPlatformBrowser:

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

Then check to see if the current platform is a browser:

ngOnInit() {
   this.platformIsBrowser = isPlatformBrowser(this._platformId);
}

Now I can safely reference window:

if (this.platformIsBrowser) {
   this.width = window ? window.innerWidth : 0;
}