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