极客教程Angular通用介绍
在过去的几年里，Angular成为开发单页应用程序的最著名的前端框架之一。
大多数人认为Angular只在客户端工作，但它部分是正确的，因为在Angular中有一个概念，解释了应用程序的某些部分在下载到浏览器之前在服务器端渲染。这个概念被称为Angular Universal。
让我们详细谈谈它以及如何在你的应用程序中实现它。在进入Angular Universal之前，让我们先简单谈谈Angular应用程序的行为方式，以及为什么需要Angular Universal。
一般来说，当我们试图运行Angular应用程序时，JavaScript首先被下载到浏览器中，然后在浏览器中进行渲染，并将网页显示给用户。一般来说，由于连接性高，我们一般不会注意到所有这些步骤。但是，当连接速度很慢时，问题就出现了，它需要时间来下载所需的JavaScript文件和渲染它们，直到这些都完成后，用户看到的是一个空白的页面，这对任何用户来说都是令人沮丧的。
因此，为了解决这个问题，Angular Universal的概念被引入到Angular中。
Angular universal允许用户在服务器上预先渲染一些angular应用程序。它不像一个服务器端的JavaScript。因此，你将无法在Angular应用程序中编写服务器端代码。
最初的请求是在服务器中预先渲染的，随后的js请求将把整个angular应用程序加载到浏览器中，以使其快速和更有反应性。第一次加载是在服务器上处理的，如果连接速度很慢，就会为用户解决用户界面问题。因此，用户能够看到应用程序的第一个网页，可以是认证页面或任何其他页面，即使JavaScript由于连接速度慢而被部分下载或渲染。
所以，这就是Angular Universal背后的基本想法。现在，让我们看看如何实现它。要使你的应用程序成为Angular Universal，只需在终端运行以下命令。
注意： projectname可以在angular.json文件中的项目下找到，然后是identificatier-name。
这将增加在服务器上渲染应用程序的选项，并获得预渲染的东西。
注意：如果你使用的是Angular 8或以下版本，那么需要检查以下内容。
ModuleMapLoader应该在app.server.module.ts的import部分被导入。如果你无法找到app.server.module.ts文件，那么运行以下命令。
对于Angular 9及以上版本，上述步骤不需要做。上述模块有助于在Angular universal中启用懒惰加载。
现在，你的应用程序已经准备好在服务器上预先渲染一些angular内容。第一个页面将在服务器上渲染，只有在第一个页面被渲染并返回给用户之后，整个应用程序才会像往常一样在浏览器中运行。
现在，这种方法有一个主要的影响。如果你现在在服务器端渲染的第一个请求包含一些不能在服务器上运行的基于浏览器的方法，如localStorage，你的应用程序将无法构建。为了解决这个问题，我们有两种方法。如果可能的话，我们用一些其他的方法来替代它，或者我们确保这样的请求只在平台是浏览器而不是服务器时才被派发。为了检查平台是浏览器还是服务器，angular提供了一个名为Platform Browser的方法，可以从@angular/common导入。
现在，使用下面的命令来构建应用程序 —
注意：由于现在你的angular应用程序在服务器端被部分渲染，所以，你需要一个node js服务器来运行应用程序，因为静态主机不足以运行你的应用程序。
在确保你安装了node js服务器或在部署的服务器上上传应用程序后。运行以下命令来运行该应用程序。
所以，这样一来，现在你的angular应用程序将充分利用服务器的优势，你可以用它来预先渲染angular应用程序的一些内容。