由于 Angular Universal Application 不在浏览器中执行，因此服务器上可能缺少某些浏览器 API 和功能。

例如，服务器端应用程序不能引用仅供浏览器使用的全局对象，例如 Window，Document，Navigator 和 Location 等对象。

什么是 Angular Universal Application？

Angular Universal 是 Angular 框架的一个功能，它允许在服务器端进行渲染，使得应用程序在客户端和服务器端均可运行。Angular Universal 应用程序可以在浏览器中以传统方式运行，也可以在服务器上进行渲染并返回 HTML，从而提高了应用程序的性能、SEO（搜索引擎优化）和用户体验。

具体来说，Angular Universal 可以让 Angular 应用程序在服务器端预先渲染（即将组件渲染成HTML），以便浏览器可以更快地呈现应用程序。这种预渲染过程可以减少浏览器需要执行的工作量，从而提高应用程序的性能和用户体验。此外，预渲染也有助于提高SEO，因为搜索引擎可以更好地理解和索引预渲染的 HTML 内容。

要创建一个 Angular Universal应用程序，需要将应用程序修改为支持服务器端渲染，并使用一个支持服务器端渲染的 Web 服务器。Angular 提供了一些工具和指南，以帮助开发人员实现这一点。

Angular 为这些对象提供了一些可注入的抽象，例如 Location 或 DOCUMENT； 它可能足以替代这些 API。 如果 Angular 不提供它，则可以编写新的抽象，在浏览器中委托给浏览器 API，在服务器上委托给替代实现（也称为 `shimming`）。

同样，如果没有鼠标或键盘事件，服务器端应用程序就不能依赖于用户单击按钮来显示组件。 应用程序必须仅根据传入的客户端请求来确定要呈现的内容。 这是使应用程序可路由(`routable`)的一个很好的论据。

什么是 Angular 应用的 Routable 特性？

![](https://img-blog.csdnimg.cn/img_convert/df2b1f05144a9e3991bc260a5b741d1a.png)

在 Angular 应用中，一个 Routable 特性是指一个组件或模块可以通过路由配置进行导航，即它们可以由 Angular 路由器来管理导航。Routable 特性是指应用程序中的一些组件和模块具有自己的路由路径，并且可以被导航到该路径。

在 Angular 中，Routable 特性可以通过以下方式来实现：

(1) 定义路由：在应用程序中定义路由，以指定如何导航到每个组件和模块。这可以通过在应用程序中的路由配置中进行定义。

(2) 使用路由器：在应用程序中使用 Angular 路由器来处理路由导航。通过使用 routerLink 指令，可以在模板中设置链接，使用户能够在应用程序中导航。

(3) 定义路由参数：通过在路由路径中使用参数，可以定义动态路由，使得组件或模块能够根据参数的不同显示不同的内容。

(4) 使用路由守卫：通过使用路由守卫，可以在导航到某个组件或模块之前或之后执行一些操作，例如身份验证或权限检查等。

Routable 特性是 Angular 应用中非常重要的一个概念，它使得开发人员能够构建具有复杂导航和动态内容的应用程序。

![](https://img-blog.csdnimg.cn/img_convert/38cee6f2bf59bd9132cbeea1073659f6.png)

ITPub博客

关于 Angular Universal 应用执行时需要 Browser API 的问题

最新文章