随着前端技术的发展，构建单页面应用已经成为了前端开发的必备技能之一。然而，由于单页面应用通常是由 JavaScript 动态渲染内容，这会导致搜索引擎很难理解页面内容，也会影响首次加载速度和 SEO。
为解决这些问题，服务器渲染（Server-Side Rendering）逐渐成为了前端开发的新热门技术。Angular Universal 是 Angular 团队开发的一款服务器端渲染框架，它提供了一种简单的方式来将 Angular 应用程序渲染到服务器上，并将已渲染的 HTML 返回到浏览器，这样搜索引擎可以获得正确的信息。
本文将介绍如何使用 Angular Universal 进行服务器渲染，并提供一些实用的示例。
准备工作
在开始之前，你需要安装以下环境：
- Node.js
- npm 或 yarn
我们将在 Angular CLI 的基础上搭建一个 Angular Universal 应用程序。如果你还没有安装 Angular CLI，可以使用以下命令安装：
npm install -g @angular/cli
需要注意的是，Angular Universal 目前只支持 Angular 8 和更高版本。如果你的项目是 Angular 7 或更早的版本，需要先升级到 Angular 8。
创建 Angular 应用程序
在开始之前，我们需要创建一个新的 Angular 应用程序。可以使用以下命令：
ng new my-app
这将创建一个名为 my-app 的新 Angular 应用程序。默认情况下，这个应用程序是一个单页面应用程序，所有内容都是通过 JavaScript 动态渲染的。
添加 Angular Universal 支持
在创建应用程序后，我们需要添加 Angular Universal 支持。可以使用以下命令：
ng add @nguniversal/express-engine
这将在应用程序中安装所有必要的依赖项，并将所需文件添加到项目中。
安装完成后，我们需要做一些额外的配置。首先，在项目的 tsconfig.app.json 文件中，将 "module" 属性设置为 "commonjs"，以便在服务器端运行应用程序：
-- -------------------- ---- -------
-
---------- ------------------
------------------ -
--------- ----------------
-------- --
--
-------- -
--------------
------------------
--
---------- -
---------------
--
------------------ -----
------------------------------- -----
--------- ----------
-其次，我们需要在项目的根模块（app.module.ts）中导入 BrowserTransferStateModule 和 ServerTransferStateModule，并将它们添加到 imports 数组中：
-- -------------------- ---- -------
------ - -------------- -------------------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ------------- ------------------------- - ---- ---------------------------
------ - ------------ - ---- ------------------
------ - ---------------- - ---- -----------------------
------ - ---------------- - ---- -----------------------
-----------
------------- -
------------
--
-------- -
------------------------------------ ------ -------- ---
-------------
-----------------
-----------------
---------------------------
-------------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -- BrowserModule：这个模块负责在浏览器中渲染应用程序。
- ServerModule：这个模块负责在服务器端渲染应用程序。
- AppRoutingModule：这个模块负责处理应用程序的路由。
- HttpClientModule：这个模块负责处理应用程序的 HTTP 请求。
- BrowserTransferStateModule 和 ServerTransferStateModule：这两个模块负责在客户端和服务器端之间传输应用程序状态。
最后，我们需要创建一个名为 "server.ts" 的文件，并在其中编写服务器端代码。这个文件包含了一个基本的 Express 应用程序，它将 Angular 应用程序渲染到服务器上，并将渲染后的 HTML 返回给浏览器。以下是一个示例：
-- -------------------- ---- -------
------ -------------------------
------ -------------------
------ - -------------- - ---- ----------------
------ - ------------------- - ---- ---------------------------
------ - ---------------- - ---- -------------------------------------------
------ - -- ------- ---- ----------
------ - ------------ - ---- -----
------ - ---- - ---- -------
----- ---- - ---------------- -- -----
----- ----------- - ------------------- ------- ----------
-----------------
----- --- - ----------
----- -------- - ------------------------------ ---------- --------------------------
----- - ------------------------- --------------- - - ------------------------- --------- ---------
------------------ --- -------- --------- -- -
----- ---- - - --------- --------- ---- --------------- --
--------------------------------------------- -----
---------- -- -------------- -------
---
------------- -------- --------
---------------- ----------------- ------------
-------------- -------------------------------- -------------
------------ ----- ---- -- -
------------------- - ---- -------- --------------------------------- ---
---
---------------- -- -- -
------------------- --------- -- ---- ----------
---这段代码中，我们首先读取服务器应用程序的 HTML 模板文件。然后，我们使用 Angular 的 renderModuleFactory 函数将 Angular 应用程序渲染到模板中，并将渲染后的 HTML 返回给浏览器。
最后，我们使用 Express 应用程序监听请求并响应。所有其他请求都被重定向到 index.html，然后 Angular 应用程序负责处理这些请求。
运行应用程序
我们已经完成了所有必要的准备工作，现在可以运行应用程序。在命令行中使用以下命令：
npm run build:ssr && npm run serve:ssr
这将首先构建应用程序的服务器版本，然后启动 Express 服务器。在浏览器中访问 http://localhost:4000，你应该能够看到应用程序在服务器上渲染的结果。
总结
Angular Universal 是一个非常有用的工具，它可以帮助我们将 Angular 应用程序渲染到服务器上，以便搜索引擎可以轻松地理解和索引页面内容。
在本文中，我们了解了如何使用 Angular CLI 和 Angular Universal 创建一个基本的服务器渲染应用程序。我们还编写了一些服务器端代码，将 Angular 应用程序渲染到服务器上，并将渲染后的 HTML 返回给浏览器。
最后，我们还提供了一些示例代码，可以帮助你更好地理解如何使用 Angular Universal。希望本文能够对你的前端开发工作有所帮助，谢谢！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f66c4bf6b2d6eab3eff1c0