Angular Universal服务器端渲染避免 window is not defined错误消息
引言
尽管 Universal 项目的目标是能够在服务器上无缝呈现 Angular 应用程序，但开发人员还是应该考虑一些注意事项。
首先，服务器和浏览器环境之间存在明显差异。 在服务器上呈现时，您的应用程序处于 ephemeral 或者 Snapshot 状态。
应用程序完全呈现一次，返回生成的 HTML，其余应用程序状态在下一次呈现之前被销毁。
其次，服务器环境本质上不具有与浏览器相同的功能（并且具有一些浏览器同样不具有的功能）。 例如，服务器没有任何cookies 的概念。
固然开发人员可以 polyfill 来一定程度上规避这个问题，但是没有完美的解决方案。
另请注意 SSR 的目标：改进应用程序的初始渲染时间。 这意味着应避免或充分防范任何可能降低此初始渲染中应用程序速度的情况出现。
一些 启用 SSR 后的常见错误：
window is not defined
使用 Angular Universal 时最常见的问题之一是服务器环境中缺少浏览器全局变量。 这是因为 Universal 项目使用 domino 作为服务器 DOM 呈现引擎。 因此，服务器上不会存在或不支持某些功能。 这包括窗口和文档全局对象、cookie、某些 HTML 元素（如画布）和其他几个。 Domino 代表节点中的 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服务器端渲染避免 window is not defined错误消息的详细内容，更多关于Angular Universal服务器端渲染的资料请关注脚本之家其它相关文章！
相关文章
最近天天都在用AngularJS，各类文档也都看过好几遍，但总是些编程上的事找不到优雅的解决办法。今天终于把AngularJS的项目访问路径URL里的#号去掉了，这个问题不见得有多难，关键是花多长时间去理解AngularJS框架本身，下面来看看详细介绍，需要的朋友可以参考下。2017-03-03
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
这篇文章主要介绍了AngularJS实现的省市二级联动功能,涉及事件监听、响应及页面元素动态操作相关技巧,此外还具备对选项进行增删的功能,需要的朋友可以参考下2017-10-10
这篇文章主要为大家详细介绍了基于AngularJS实现表单验证功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
本文主要介绍AngularJS Bootstrap,这两对AngularJS Bootstrap的基础知识做了详细讲解,并提供简单示例,有需要的小伙伴可以参考下2016-07-07
AngularJS报错$apply already in progress的解决方法分析
这篇文章主要介绍了AngularJS报错$apply already in progress的解决方法,较为详细的分析了报错$apply already in progress的原理、处理技巧与相关注意事项,需要的朋友可以参考下2017-01-01
Angualrjs和bootstrap相结合实现数据表格table
这篇文章主要介绍了Angualrjs和bootstrap相结合实现数据表格table,代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-03-03
本篇文章主要介绍了Angular 4.x Injector，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
这篇文章主要给大家介绍了关于如何使用RxJS更优雅地进行定时请求的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用RxJS具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-06-06
在Angular中,懒加载技术通过路由配置实现模块的按需加载,可优化应用启动时间和减少初始加载代码量,首先创建独立模块,在模板中使用<router-outlet>插入懒加载组件,并可采用预加载策略如PreloadAllModules,以提前加载所有懒加载模块,优化加载性能2024-10-10
这篇文章主要介绍了Angular HttpClient的源码解析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
最新评论