Angular Universal服務(wù)器端渲染避免 window is not defined錯(cuò)誤消息

更新時(shí)間：2023年07月27日 09:47:00 作者：JerryWang_汪子熙

這篇文章主要介紹了Angular Universal服務(wù)器端渲染避免 window is not defined錯(cuò)誤消息，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

引言

盡管 Universal 項(xiàng)目的目標(biāo)是能夠在服務(wù)器上無(wú)縫呈現(xiàn) Angular 應(yīng)用程序，但開(kāi)發(fā)人員還是應(yīng)該考慮一些注意事項(xiàng)。

首先，服務(wù)器和瀏覽器環(huán)境之間存在明顯差異。在服務(wù)器上呈現(xiàn)時(shí)，您的應(yīng)用程序處于 ephemeral 或者 Snapshot 狀態(tài)。

應(yīng)用程序完全呈現(xiàn)一次，返回生成的 HTML，其余應(yīng)用程序狀態(tài)在下一次呈現(xiàn)之前被銷(xiāo)毀。

其次，服務(wù)器環(huán)境本質(zhì)上不具有與瀏覽器相同的功能（并且具有一些瀏覽器同樣不具有的功能）。例如，服務(wù)器沒(méi)有任何cookies 的概念。

固然開(kāi)發(fā)人員可以 polyfill 來(lái)一定程度上規(guī)避這個(gè)問(wèn)題，但是沒(méi)有完美的解決方案。

另請(qǐng)注意 SSR 的目標(biāo)：改進(jìn)應(yīng)用程序的初始渲染時(shí)間。這意味著應(yīng)避免或充分防范任何可能降低此初始渲染中應(yīng)用程序速度的情況出現(xiàn)。

一些啟用 SSR 后的常見(jiàn)錯(cuò)誤：

window is not defined

使用 Angular Universal 時(shí)最常見(jiàn)的問(wèn)題之一是服務(wù)器環(huán)境中缺少瀏覽器全局變量。這是因?yàn)?Universal 項(xiàng)目使用 domino 作為服務(wù)器 DOM 呈現(xiàn)引擎。因此，服務(wù)器上不會(huì)存在或不支持某些功能。這包括窗口和文檔全局對(duì)象、cookie、某些 HTML 元素（如畫(huà)布）和其他幾個(gè)。 Domino 代表節(jié)點(diǎn)中的 DOM.

解決這個(gè)錯(cuò)誤的一些思路

通常，需要的全局變量可以通過(guò) Angular 平臺(tái)通過(guò)依賴注入 (DI) 獲得。

例如，全局文檔可通過(guò) DOCUMENT 令牌獲得。此外，通過(guò) DOCUMENT 對(duì)象可以獲得 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);
  }
}

以上就是Angular Universal服務(wù)器端渲染避免 window is not defined錯(cuò)誤消息的詳細(xì)內(nèi)容，更多關(guān)于Angular Universal服務(wù)器端渲染的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: