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

【问题标题】：JavascriptServices window not defined from server side prerenderingJavascriptServices 窗口未从服务器端预渲染定义
【发布时间】：2018-02-27 05:05:21
【问题描述】：

我正在使用带有 angular2+ 的 javascriptservices 模板，我正在尝试找到一种解决方案，将库导入我的 component 以尝试访问 window。 Javascript 服务使用服务器端预渲染，因此您不能将库导入到立即尝试访问窗口而不会出现窗口未定义错误的组件中。

目前，我正在尝试将 dat.gui 添加到我的组件中，但我还没有找到解决方案。 https://www.npmjs.com/package/dat.gui

有人知道我可以在客户端上加载dat.gui库并将其传递给我的组件以避免窗口未定义错误 strong> 将其导入组件时？

由于服务器端预渲染，添加到我的组件时总是会抛出错误。

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

或者从‘dat.gui’导入*作为dat；

【问题讨论】：

在我的情况下，我使用将参数从服务器传递到客户端并尝试在客户端读取它然后发生这种情况。在您的情况下，您只是从其模块中导入吗？
K11k2 是正确的，我正在从模块中导入它。你是说你的方法行不通？
让我知道究竟是什么让你出现了这个错误，所以添加你尝试过的代码。
我列出的代码给了我这个错误，因为服务器端预渲染将加载我的组件和其中的导入。由于组件正在服务器上呈现并且需要 dat.gui，这将需要访问不存在的 DOM，它会抛出 window is undefined 错误。我正在尝试找到一个解决方案，我可以在服务器预渲染后导入 day.gui 库。
那么你可以设置ngAfterView() {setTimeout(function(){ const dat = require('dat.gui'); const gui = new dat.GUI(); },3000);}

标签： angular typescript asp.net-core components javascriptservices

【解决方案1】：

这是我用来确保它是浏览器使用窗口、文档、导航器、jQuery 操作的方法。

  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();
      }
    }

【讨论】：