Angular Universal服務(wù)器端渲染避免 window is not defined錯誤消息
引言
盡管 Universal 項目的目標(biāo)是能夠在服務(wù)器上無縫呈現(xiàn) Angular 應(yīng)用程序，但開發(fā)人員還是應(yīng)該考慮一些注意事項。
首先，服務(wù)器和瀏覽器環(huán)境之間存在明顯差異。 在服務(wù)器上呈現(xiàn)時，您的應(yīng)用程序處于 ephemeral 或者 Snapshot 狀態(tài)。
應(yīng)用程序完全呈現(xiàn)一次，返回生成的 HTML，其余應(yīng)用程序狀態(tài)在下一次呈現(xiàn)之前被銷毀。
其次，服務(wù)器環(huán)境本質(zhì)上不具有與瀏覽器相同的功能（并且具有一些瀏覽器同樣不具有的功能）。 例如，服務(wù)器沒有任何cookies 的概念。
固然開發(fā)人員可以 polyfill 來一定程度上規(guī)避這個問題，但是沒有完美的解決方案。
另請注意 SSR 的目標(biāo)：改進應(yīng)用程序的初始渲染時間。 這意味著應(yīng)避免或充分防范任何可能降低此初始渲染中應(yīng)用程序速度的情況出現(xiàn)。
一些 啟用 SSR 后的常見錯誤：
window is not defined
使用 Angular Universal 時最常見的問題之一是服務(wù)器環(huán)境中缺少瀏覽器全局變量。 這是因為 Universal 項目使用 domino 作為服務(wù)器 DOM 呈現(xiàn)引擎。 因此，服務(wù)器上不會存在或不支持某些功能。 這包括窗口和文檔全局對象、cookie、某些 HTML 元素（如畫布）和其他幾個。 Domino 代表節(jié)點中的 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);
}
}以上就是Angular Universal服務(wù)器端渲染避免 window is not defined錯誤消息的詳細(xì)內(nèi)容，更多關(guān)于Angular Universal服務(wù)器端渲染的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
最近天天都在用AngularJS，各類文檔也都看過好幾遍，但總是些編程上的事找不到優(yōu)雅的解決辦法。今天終于把AngularJS的項目訪問路徑URL里的#號去掉了，這個問題不見得有多難，關(guān)鍵是花多長時間去理解AngularJS框架本身，下面來看看詳細(xì)介紹，需要的朋友可以參考下。2017-03-03
AngularJS實現(xiàn)的省市二級聯(lián)動功能示例【可對選項實現(xiàn)增刪】
這篇文章主要介紹了AngularJS實現(xiàn)的省市二級聯(lián)動功能,涉及事件監(jiān)聽、響應(yīng)及頁面元素動態(tài)操作相關(guān)技巧,此外還具備對選項進行增刪的功能,需要的朋友可以參考下2017-10-10
這篇文章主要為大家詳細(xì)介紹了基于AngularJS實現(xiàn)表單驗證功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
AngularJS Bootstrap詳細(xì)介紹及實例代碼
本文主要介紹AngularJS Bootstrap,這兩對AngularJS Bootstrap的基礎(chǔ)知識做了詳細(xì)講解,并提供簡單示例,有需要的小伙伴可以參考下2016-07-07
AngularJS報錯$apply already in progress的解決方法分析
這篇文章主要介紹了AngularJS報錯$apply already in progress的解決方法,較為詳細(xì)的分析了報錯$apply already in progress的原理、處理技巧與相關(guān)注意事項,需要的朋友可以參考下2017-01-01
Angualrjs和bootstrap相結(jié)合實現(xiàn)數(shù)據(jù)表格table
這篇文章主要介紹了Angualrjs和bootstrap相結(jié)合實現(xiàn)數(shù)據(jù)表格table,代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-03-03
本篇文章主要介紹了Angular 4.x Injector，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要給大家介紹了關(guān)于如何使用RxJS更優(yōu)雅地進行定時請求的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用RxJS具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
在Angular中,懶加載技術(shù)通過路由配置實現(xiàn)模塊的按需加載,可優(yōu)化應(yīng)用啟動時間和減少初始加載代碼量,首先創(chuàng)建獨立模塊,在模板中使用<router-outlet>插入懶加載組件,并可采用預(yù)加載策略如PreloadAllModules,以提前加載所有懶加載模塊,優(yōu)化加載性能2024-10-10
這篇文章主要介紹了Angular HttpClient的源碼解析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07