Angular Universal服务器端渲染避免 window is not defined错误消息

 更新时间:2023年07月27日 09:47:00   作者:JerryWang_汪子熙  
这篇文章主要介绍了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服务器端渲染的资料请关注脚本之家其它相关文章!

相关文章

  • angular中ui calendar的一些使用心得(推荐)

    angular中ui calendar的一些使用心得(推荐)

    下面小编就为大家带来一篇angular中ui calendar的一些使用心得(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • 由浅入深剖析Angular表单验证

    由浅入深剖析Angular表单验证

    这篇文章主要介绍了由浅入深剖析Angular表单验证 的相关资料,需要的朋友可以参考下
    2016-07-07
  • Angularjs 动态改变title标题(兼容ios)

    Angularjs 动态改变title标题(兼容ios)

    这篇文章主要介绍了 Angularjs 动态改变title标题(兼容ios)的相关资料,需要的朋友可以参考下
    2016-12-12
  • 深入探究angular2 UI组件之primeNG用法

    深入探究angular2 UI组件之primeNG用法

    本篇文章主要介绍了深入探究angular2 UI组件之primeNG用法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • Angular组件化管理实现方法分析

    Angular组件化管理实现方法分析

    这篇文章主要介绍了Angular组件化管理实现方法,结合具体实例分析了Angular模块组件化管理以提高代码复用性的实现方法与相关操作技巧,需要的朋友可以参考下
    2017-03-03
  • AngularJS实用开发技巧(推荐)

    AngularJS实用开发技巧(推荐)

    Angular JS 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。接下来通过本文给大家介绍AngularJS实用开发技巧的相关资料,需要的朋友可以参考下
    2016-07-07
  • AngularJS入门教程之ng-checked 指令详解

    AngularJS入门教程之ng-checked 指令详解

    本文主要讲解AngularJS ng-checked 指令,在这整理ng-checked 指令的基础知识,并附代码实例,有需要的小伙伴可以参考下
    2016-08-08
  • Angular整合zTree的示例代码

    Angular整合zTree的示例代码

    本篇文章主要介绍了Angular整合zTree的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • 使用angularjs.foreach时return的问题解决

    使用angularjs.foreach时return的问题解决

    这篇文章主要介绍了使用angularjs.foreach时return的问题解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • AngularJs用户输入动态模板XSS攻击示例详解

    AngularJs用户输入动态模板XSS攻击示例详解

    这篇文章主要给大家介绍了关于AngularJs用户输入动态模板XSS攻击的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用angularjs具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2018-04-04

最新评论