当前位置: 首页 > Web前端 > HTML

使用AngularUniversal避免窗口未定义的服务器端渲染错误消息

时间:2023-03-28 01:55:08 HTML

虽然Universal项目的目标是能够在服务器上无缝渲染Angular应用程序,但开发人员应该考虑一些注意事项。首先,服务器和浏览器环境之间存在明显差异。在服务器上呈现时,您的应用程序处于短暂或快照状态。应用程序完全呈现一次,返回生成的HTML,应用程序状态的其余部分在下一次呈现之前被销毁。其次,服务器环境本身并不具有与浏览器相同的功能(并且具有浏览器也没有的某些功能)。例如,服务器没有任何cookie的概念。虽然开发者可以通过polyfill在一定程度上规避这个问题,但是并没有完美的解决方案。另请注意SSR的目标:改进应用程序的初始渲染时间。这意味着应避免或充分防范在此初始渲染期间可能会减慢应用程序速度的任何事情。启用SSR后的一些常见错误:windowisnotdefined使用AngularUniversal时最常见的问题之一是服务器环境中缺少浏览器全局变量。这是因为Universal项目使用domino作为服务器DOM呈现引擎。因此,服务器上将不存在或不支持某些功能。这包括窗口和文档全局对象、cookie、某些HTML元素(如画布)和其他几个元素。Domino代表Node中的DOM。解决此错误的一些想法:通常,所需的全局变量可以通过依赖注入(DI)通过Angular平台获得。例如,全球文档可通过DOCUMENT令牌获得。此外,可以通过DOCUMENT对象获得非常原始的窗口和位置版本。例如:示例代码如下:import{Injectable,Inject}from'@angular/core';import{DOCUMENT}from'@angular/common';@Injectable()exportclassExampleService{constructor(@Inject(DOCUMENT)private_doc:文档){}getWindow():窗口|null{返回this._doc.defaultView;}getLocation():Location{returnthis._doc.location;}createElement(tag:string):HTMLElement{returnthis._doc.createElement(tag);}}