在过去的几年中，Angular成为开发单页应用程序的最著名的前端框架之一。
大多数人认为Angular只能在客户端使用，但由于Angular中有一个概念，它解释了一部分应用程序的一部分，该部分解释了要在服务器端呈现的应用程序，然后再将其下载到浏览器中。这个概念称为Angular Universal 。
让我们详细讨论它，以及如何在您的应用程序中实现它。在转向Angular Universal之前，让我们先简单介绍一下Angular应用程序的行为以及为什么需要Angular Universal。
通常，当我们尝试运行Angular应用程序时，首先将JavaScript下载到浏览器中，然后将其呈现在浏览器中，并将网页显示给用户。通常，由于高连接性，我们通常不会注意到所有这些步骤。但是，当连接速度很慢时，就会出现问题，需要花费一些时间来下载所需的JavaScript文件并渲染它们，直到所有这些文件完成为止，用户会看到空白页，任何用户都会对此感到沮丧。
因此，为解决此问题，在Angular中引入了Angular Universal的概念。
Angular Universal允许用户在服务器上预渲染一些角度应用程序。它不像服务器端JavaScript。因此，您将无法在angular应用程序内编写服务器端代码。
初始请求已在服务器中预先呈现，随后的js请求随后会将整个angular应用程序加载到浏览器中，以使其更加快速，更具响应性。如果连接速度较慢，则在服务器上处理第一个负载，该负载将为用户解决UI问题。因此，即使由于缓慢的连接问题而部分下载或渲染了JavaScript，用户也可以看到可以是身份验证页面或其他任何页面的应用程序的第一个网页。
因此，这是Angular Universal的基本概念。现在，让我们看看如何实现它。要使您的应用程序成为Angular Universal，只需在终端中运行以下命令。
ng添加@ nguniversal / express-engine –clientProject项目名称
注意：可以在项目下的angular.json文件中找到项目名称，然后找到名称。
这将添加选项以在服务器上呈现应用程序并获取预呈现的东西。
注意：如果您使用的是Angular 8或更低版本，则需要检查以下内容。
ModuleMapLoader应该导入在import部分下的app.server.module.ts中。如果找不到app.server.module.ts文件，请运行以下命令。
npm install –保存@ nguniversal / module-map-ngfactory-loader
对于Angular 9及更高版本，无需执行上述步骤。上面的模块有助于实现角度通用中的延迟加载。
现在，您的应用已准备就绪，可以在服务器上预渲染一些角度内容。第一页将在服务器上呈现，并且只有在第一页呈现并返回给用户之后，整个应用程序才能像往常一样在浏览器中运行。
现在，这种方法具有重大意义。如果现在在服务器端呈现的第一个请求包含一些无法运行到服务器的基于浏览器的方法(例如localStorage)，则您的应用程序将无法构建。为了解决这个问题，我们有两种方法。如果可能，我们用其他方法替换它，或者确保仅在平台是浏览器而不是服务器时才分派此类请求。要检查平台是浏览器还是服务器，angular提供了一种名为Platform Browser的方法，可以从@ angular / common导入该方法。
现在，使用以下命令来构建应用程序–
npm运行build：ssr
注意：由于现在您的角度应用程序已部分呈现在服务器端，因此，您需要使用节点js服务器来运行该应用程序，因为静态主机不足以运行您的应用程序。
确保已安装节点js服务器或在已部署的服务器上上传应用程序之后。运行以下命令以运行该应用程序。
npm run serve：ssr
因此，以这种方式，您的角度应用程序现在将充分利用服务器的优势，您可以使用它来预渲染角度应用程序的某些内容。