关于前端:使用-Angular-Universal-进行服务器端渲染避免-window-is-not-defined-的错误消息

4次阅读

共计 991 个字符，预计需要花费 3 分钟才能阅读完成。

只管 Universal 我的项目的指标是可能在服务器上无缝出现 Angular 应用程序，但开发人员还是应该思考一些注意事项。

首先，服务器和浏览器环境之间存在显著差别。在服务器上出现时，您的应用程序处于 ephemeral 或者 Snapshot 状态。

应用程序齐全出现一次，返回生成的 HTML，其余应用程序状态在下一次出现之前被销毁。

其次，服务器环境实质上不具备与浏览器雷同的性能（并且具备一些浏览器同样不具备的性能）。例如，服务器没有任何 cookies 的概念。

诚然开发人员能够 polyfill 来肯定水平上躲避这个问题，然而没有完满的解决方案。

另请留神 SSR 的指标：改良应用程序的初始渲染工夫。这意味着应防止或充沛防备任何可能升高此初始渲染中应用程序速度的状况呈现。

一些启用 SSR 后的常见谬误：

应用 Angular Universal 时最常见的问题之一是服务器环境中短少浏览器全局变量。这是因为 Universal 我的项目应用 domino 作为服务器 DOM 出现引擎。因而，服务器上不会存在或不反对某些性能。这包含窗口和文档全局对象、cookie、某些 HTML 元素（如画布）和其余几个。Domino 代表节点中的 DOM.

解决这个谬误的一些思路：

通常，须要的全局变量能够通过 Angular 平台通过依赖注入 (DI) 取得。例如，全局文档可通过 DOCUMENT 令牌取得。此外，通过 DOCUMENT 对象能够取得 window 和 location 的十分原始的版本。例如：

示例代码如下：

import {Injectable, Inject} from '@angular/core';
import {DOCUMENT} from '@angular/common';

@Injectable()
export class ExampleService {constructor(@Inject(DOCUMENT) private _doc: Document) {}

  getWindow(): Window | null {return this._doc.defaultView;}

  getLocation(): Location {return this._doc.location;}

  createElement(tag: string): HTMLElement {return this._doc.createElement(tag);
  }
}

正文完