Angular 9 Universal ReferenceError：窗口未定义

服务器

# 解决 Angular 9 Universal ReferenceError: 窗口未定义

Angular是一种流行的前端框架，用于构建现代、可维护的单页面应用程序（SPA）。Angular Universal是Angular的一个扩展，允许我们在服务器端渲染应用程序，以提高性能和搜索引擎优化。然而，在使用Angular Universal时，有时候可能会遇到ReferenceError: 窗口未定义（ReferenceError: window is not defined）的错误。本文将探讨这个错误的原因，并提供解决方案。

## 问题背景

在使用Angular Universal时，我们的应用可能会在服务器端执行一些代码，而这些代码在浏览器环境中才能正确执行。窗口对象是浏览器中的全局对象，但在服务器端可能不存在。因此，当尝试在服务器端访问窗口对象时，就会触发ReferenceError。

## 错误示例

让我们看一个简单的例子，展示了可能触发ReferenceError的情况。假设我们有以下组件：

typescript
// app.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-root',
  template: <code>
    
<img src="https://img.izhida.com/topic/a20a4b60ffe4f7fc9624c45f861283ea.jpg" alt="搜索引擎"><br>搜索引擎
这是在浏览器中可见的段落。
  </code>,
})
export class AppComponent implements OnInit {
  isBrowser: boolean;
  ngOnInit() {
    this.isBrowser = typeof window !== 'undefined';
  }
}

在上面的代码中，我们尝试通过检查window对象是否被定义来确定应用程序是否在浏览器中运行。然而，当应用程序在服务器端执行时，window对象未定义，从而导致ReferenceError。

## 解决方案

为了解决这个问题，我们需要在访问window对象之前进行检查，以确保它在服务器端不存在时不会引发错误。我们可以使用isPlatformBrowser来检测当前是否在浏览器环境中。

typescript
// app.component.ts
import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
@Component({
  selector: 'app-root',
  template: <code>
    
这是在浏览器中可见的段落。
  </code>,
})
export class AppComponent implements OnInit {
  isBrowser: boolean;
  constructor(@Inject(PLATFORM_ID) private platformId: Object) {}
  ngOnInit() {
    this.isBrowser = isPlatformBrowser(this.platformId);
  }
}

在上述代码中，我们使用isPlatformBrowser来检查当前是否在浏览器环境中。这样，我们就可以避免在服务器端引发ReferenceError。

##

通过在访问window对象之前进行检查，我们可以在使用Angular Universal时避免ReferenceError: 窗口未定义的问题。使用isPlatformBrowser是一种简单而有效的方法，确保我们的代码在不同环境中都能正确运行。在开发Angular Universal应用程序时，牢记这一点将有助于提高应用的稳定性和可维护性。