Angular Universal SSR ReferenceError：未定义元素答案

【问题标题】：Angular Universal SSR ReferenceError: Element is not definedAngular Universal SSR ReferenceError：未定义元素
【发布时间】：2021-03-19 12:11:49
【问题描述】：

我在使用 Angular 9 的 npm run serve:ssr 期间遇到错误。

C:\Projects\gloffice-client-ui-apela\dist\general-ledger-office-server\main.js:362348 Element.prototype.matches || ^

ReferenceError: 元素未定义在 Object.p4r7 (C:\Projects\gloffice-client-ui-apela\dist\general-ledger-office-server\main.js:362348:3) 在 webpack_require (C:\Projects\gloffice-client-ui-apela\dist\general-ledger-office-server\main.js:20:30) 在 Object.47Jg (C:\Projects\gloffice-client-ui-apela\dist\general-ledger-office-server\main.js:66309:27) 在 webpack_require (C:\Projects\gloffice-client-ui-apela\dist\general-ledger-office-server\main.js:20:30) 在 Object.wCP4 (C:\Projects\gloffice-client-ui-apela\dist\general-ledger-office-server\main.js:437789:27) 在 webpack_require (C:\Projects\gloffice-client-ui-apela\dist\general-ledger-office-server\main.js:20:30) 在 Object.ZAI4 (C:\Projects\gloffice-client-ui-apela\dist\general-ledger-office-server\main.js:307442:24) 在 webpack_require (C:\Projects\gloffice-client-ui-apela\dist\general-ledger-office-server\main.js:20:30) 在 Object.24aS (C:\Projects\gloffice-client-ui-apela\dist\general-ledger-office-server\main.js:61326:20) 在 webpack_require (C:\Projects\gloffice-client-ui-apela\dist\general-ledger-office-server\main.js:20:30)

关于如何修复此错误的任何想法？谢谢。

【问题讨论】：

标签： angular

【解决方案1】：

您提供的错误似乎来自某些 3d 方库，该库未调整为与 Universal 一起使用，而是直接使用 window 或 document 对象。来自official docs：

由于通用应用程序不在浏览器中执行，因此某些服务器上可能缺少浏览器 API 和功能。为了例如，服务器端应用程序不能引用仅浏览器的全局 window、document、navigator 或 location 等对象。

在使用 Angular Universal 完成了几个项目之后，我写了一个可以帮助你的问题列表：http://michaelborisov.com/blog

【讨论】：

【解决方案2】：

根据我们朋友的回答，应该清楚我们的浏览器已经准备好了

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

export class MyComponent {
browserIsReady: boolean;
constructor(
    @Inject(PLATFORM_ID) platformId: string) {
        this.browserIsReady = isPlatformBrowser(platformId);
        if (this.browserIsReady) {
            //this is only executed on the browser
        }
}

【讨论】：