修复NGUniversal窗口未定义错误

Question

我有一个 Angular 16.2.12 应用程序，我刚刚添加了

ng-universal

。当我运行

npm run dev:ssr

命令时，出现以下错误。

错误参考错误：窗口未定义

它来自我的

app.component.ts

文件中的一行代码，我在其中引用了这样的

window

对象。

private ScrollWatcher : Observable<Event> = fromEvent(window, 'scroll');

我知道这是因为

window

对象尚不可用，因为应用程序在发送到存在

window

对象的浏览器之前正在服务器上渲染，但现在我很困惑如何应该解决这个问题。本质上，我应该以某种方式告诉应用程序等到它到达浏览器后再尝试访问

window

元素，但我什至不知道我应该研究什么来解决这个问题。有谁知道如何处理这个问题吗？

Answer 1

您可以实现任何服务器端 dom 实现并将其集成到您的服务器中，以使

window

在服务器上可用。

例如，如果您的 Angular 通用服务器是 Express ，则可以使用 domino

const domino = require("domino");
const win = domino.createWindow(templateA);
global["document"] = win.document;

将此代码添加到您的

server.ts

文件中，它应该可以工作。 或者，如果您不打算在服务器上使用代码，您可以仅使用平台 ID 进行平台检查并仅在浏览器上运行它。