未从服务器端预渲染定义JavascriptServices窗口

Question

I am using javascriptservices template with angular2+, and I am trying to find a solution for importing libraries into my component that try to access window . Javascript services use server-side pre-rendering, so you cannot import libraries into components that immediately try to access window without getting window is not defined error.

Currently, I am trying to add dat.gui to my component, but I have not found a solution. https://www.npmjs.com/package/dat.gui

Does anybody know of a way that I can load the dat.gui library on the client-side , and pass it to my component to avoid the window is not defined error when importing it into a component?

This will always throw an error when added to my component because of the server side pre-rendering.

const dat = require('dat.gui');
const gui = new dat.GUI();

Or Import * as dat from 'dat.gui';

Answer 1

This is how I use to make sure it's the browser to use window, document, navigator, jQuery operations.

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


    constructor(@Inject(PLATFORM_ID) private platformId: Object){}

    private isBrowser: boolean = isPlatformBrowser(this.platformId);

    ngAfterViewInit(){
      if (this.isBrowser) {
       const dat = require('dat.gui');
       const gui = new dat.GUI();
      }
    }