使用 Angular Universal 進行伺服器端渲染避免 window is not defined 的錯誤訊息

i042416發表於2023-02-18

儘管 [Universal](https://github.com/angular/universal/blob/main/docs/gotchas.md) 專案的目標是能夠在伺服器上無縫呈現 Angular 應用程式，但開發人員還是應該考慮一些注意事項。
 
首先，伺服器和瀏覽器環境之間存在明顯差異。 在伺服器上呈現時，您的應用程式處於 `ephemeral` 或者 Snapshot 狀態。

應用程式完全呈現一次，返回生成的 HTML，其餘應用程式狀態在下一次呈現之前被銷燬。

其次，伺服器環境本質上不具有與瀏覽器相同的功能（並且具有一些瀏覽器同樣不具有的功能）。 例如，伺服器沒有任何cookies 的概念。

固然開發人員可以 polyfill 來一定程度上規避這個問題，但是沒有完美的解決方案。

另請注意 SSR 的目標：改進應用程式的初始渲染時間。 這意味著應避免或充分防範任何可能降低此初始渲染中應用程式速度的情況出現。

一些 啟用 SSR 後的常見錯誤：

# window is not defined

使用 Angular Universal 時最常見的問題之一是伺服器環境中缺少瀏覽器全域性變數。 這是因為 Universal 專案使用 domino 作為伺服器 DOM 呈現引擎。 因此，伺服器上不會存在或不支援某些功能。 這包括視窗和檔案全域性物件、cookie、某些 HTML 元素（如畫布）和其他幾個。 Domino 代表節點中的 DOM.

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/76264207fef2447fb562c85eb809c20a.png#pic_center)

解決這個錯誤的一些思路：

通常，需要的全域性變數可以透過 Angular 平臺透過依賴注入 (DI) 獲得。 例如，全域性檔案可透過 DOCUMENT 令牌獲得。 此外，透過 DOCUMENT 物件可以獲得 window 和 location 的非常原始的版本。 例如：

示例程式碼如下：

```typescript
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);
  }
}
```

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/24475491/viewspace-2935861/，如需轉載，請註明出處，否則將追究法律責任。

Angular 伺服器端渲染應用的一個錯誤訊息 - localStorage is not defined
2022-05-19
Angular伺服器
使用 Angular Universal 進行伺服器端渲染的防禦性程式設計思路
2023-02-18
Angular伺服器程式設計
Angular Universal 學習筆記 - 客戶端渲染和伺服器端渲染的區別
2021-05-23
Angular筆記客戶端伺服器
Angular No provider for EffectsRootModule錯誤訊息
2020-10-11
AngularIDE
按照Angular官網教程執行簡單的測試程式碼，會遇到expect is not defined的錯誤訊息
2021-04-19
Angular
Angular 錯誤訊息：ERROR Error NullInjectorError No provider for XX
2023-04-02
AngularErrorNullIDE
如何使用 Angular 伺服器端渲染的 Transfer State Service
2022-05-19
Angular伺服器
Angular Universal 的演進歷史
2022-01-09
Angular
Angular 依賴注入錯誤訊息：ERROR Error NullInjectorError No provider for XX
2023-03-30
Angular依賴注入ErrorNullIDE
使用Eclipse進行PHP的伺服器端除錯
2018-09-16
EclipsePHP伺服器除錯
Universal-webpack服務端渲染
2019-02-16
Web服務端
Angular 伺服器端渲染的學習筆記(一)
2021-05-23
Angular伺服器筆記
Angular 伺服器端渲染的學習筆記(二)
2021-05-23
Angular伺服器筆記
使用 Spring Boot 提供API錯誤訊息的好方式
2021-06-04
Spring BootAPI
SAP Spartacus 伺服器端渲染單步除錯步驟之二：在伺服器端執行應用程式 Angular 程式碼
2021-08-23
伺服器除錯Angular
在Pycharm上使用遠端伺服器進行除錯
2023-03-17
PyCharm伺服器除錯
SAP錯誤訊息除錯之七種武器：讓所有的錯誤訊息都能被定位
2019-12-11
除錯
什麼是好的錯誤訊息?
2023-03-26
SAP ABAP 系統進行 client 複製時遇到的 63999 table too wide 錯誤訊息
2022-06-30
clientIDE
如何處理錯誤訊息PleaseinstalltheLinuxkernelheaderfiles
2018-10-15
LinuxHeader
使用 Vue 3 時應避免的 10 個錯誤
2023-03-10
Vue
使用IDEA進行遠端除錯
2024-06-27
Idea除錯
使用Xdebug進行遠端除錯
2021-11-18
除錯
RabbitMQ訊息佇列（六）：使用主題進行訊息分發
2018-04-02
MQ佇列
MES專案執行：3個要避免的錯誤
2020-07-27
Windows下使用python庫 curses遇到錯誤訊息的解決方案
2018-10-03
WindowsPython
使用 SAP fiori-tools-proxy 時遇到的錯誤訊息 - invalid version
2023-05-17
angular中ExpressionChangedAfterItHasBeenCheckedError錯誤
2022-04-18
AngularExpressError
使用describe命令進行Kubernetes pod錯誤排查
2018-11-20
Laravel 的 Validation 檢索驗證錯誤訊息
2019-12-23
Laravel
錯誤訊息sales area is not assigned for the header product
2020-02-08
Header
python 用traceback列印錯誤訊息（轉）
2024-10-13
Python
給 Angular 伺服器端渲染應用設定一個渲染超時時間
2022-05-22
Angular伺服器
Angular6 服務端渲染
2019-04-18
Angular服務端
GTK的訊息流說明（X Window做後端的情況）
2020-04-06
後端
使用Idea構建springmvc框架，出現no bean named ‘cacheManager’ is defined 錯誤。
2018-05-16
IdeaSpringMVC框架Bean
Angular Universal：Angular 統一平臺簡介
2021-09-11
Angular
要避免的七個災難性的雲端計算錯誤
2020-09-19

使用 Angular Universal 進行伺服器端渲染避免 window is not defined 的錯誤訊息

相關文章