# 解决 Angular 9 Universal ReferenceError: 窗口未定义
Angular是一种流行的前端框架，用于构建现代、可维护的单页面应用程序（SPA）。Angular Universal是Angular的一个扩展，允许我们在服务器端渲染应用程序，以提高性能和搜索引擎优化。然而，在使用Angular Universal时，有时候可能会遇到ReferenceError: 窗口未定义（ReferenceError: window is not defined）的错误。本文将探讨这个错误的原因，并提供解决方案。## 问题背景在使用Angular Universal时，我们的应用可能会在服务器端执行一些代码，而这些代码在浏览器环境中才能正确执行。窗口对象是浏览器中的全局对象，但在服务器端可能不存在。因此，当尝试在服务器端访问窗口对象时，就会触发ReferenceError。## 错误示例让我们看一个简单的例子，展示了可能触发ReferenceError的情况。假设我们有以下组件：typescript// app.component.tsimport { Component, OnInit } from '@angular/core';@Component({ selector: 'app-root', template: ` 这是在浏览器中可见的段落。
`,})export class AppComponent implements OnInit { isBrowser: boolean; ngOnInit() { this.isBrowser = typeof window !== 'undefined'; }}在上面的代码中，我们尝试通过检查`window`对象是否被定义来确定应用程序是否在浏览器中运行。然而，当应用程序在服务器端执行时，`window`对象未定义，从而导致ReferenceError。## 解决方案为了解决这个问题，我们需要在访问`window`对象之前进行检查，以确保它在服务器端不存在时不会引发错误。我们可以使用`isPlatformBrowser`来检测当前是否在浏览器环境中。typescript// app.component.tsimport { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core';import { isPlatformBrowser } from '@angular/common';@Component({ selector: 'app-root', template: ` 这是在浏览器中可见的段落。
`,})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应用程序时，牢记这一点将有助于提高应用的稳定性和可维护性。