前言
前端应用的服务器渲染对于提高页面性能具有重要作用。在服务器端预渲染HTML文档，能够改善SEO以及降低浏览器的渲染压力。Angular应用也不例外，因此本文将讲解如何使用@ngx-universal/express-engine NPM包，实现Angular的服务器端渲染。
什么是@ngx-universal/express-engine
@ngx-universal/express-engine是Angular Universal平台下的一个渲染引擎。它允许在使用Angular框架的应用程序中，从服务器端渲染HTML文档来提高性能。
安装
首先，在你的Angular项目中安装@ngx-universal/express-engine：
npm install --save @ngx-universal/express-engine
用法
在你的Angular项目中使用@ngx-universal/express-engine，只需简单地遵循以下步骤：
1. 在AppModule中注册渲染引擎
在AppModule中导入BrowserModule和ServerModule，然后将app.module.ts文件中的BrowserModule替换为ServerModule。并在imports数组中加入@nguniversal/module-map-ngfactory-loader和@ngx-universal/express-engine模块，示例如下：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------ - ---- ---------------------------
------ - --------------------- - ---- -------------------------------------------
------ - ------------ - ---- ------------------
------ - --------- - ---- ---------------
------ - ---------------------- - ---- --------------------------------
-----------
-------- -
----------
-------------
----------------------
--------------------------------
--
---------- ---------------
--
------ ----- --------------- - -2. 注册服务端渲染的路由
在你的服务端入口文件中注册路由，以便Express能够使用HTTP GET请求获取预渲染HTML文档。示例如下：
-- -------------------- ---- ------- ------ - -- ------- ---- ---------- ------ ------ ---- ------- ----- --- - ---------- -- ----- ------ ----- ---- -------- ------------------------------------------ ----------- ------- --------- -- -------- ----------- --------- ----- -------------- ---------------------------------- ----------- - ------- ---- ---- -- ------ --- ------- --------- ------------ ----- ---- -- - ------------------- - --- --- ---
3. 创建ngExpressEngine实例
在服务端入口文件中，创建一个ngExpressEngine实例。它是@ngx-universal/express-engine的主要类，用于将Angular应用程序的状态渲染到HTML字符串中。
import {ngExpressEngine} from '@ngx-universal/express-engine';
app.engine('html', ngExpressEngine({
bootstrap: AppServerModule,
}));4. 在模板中使用server-side rendering的指令
在模板中使用server-side rendering的指令（例如ngxSSR、ngxSSRAttrs和ngxSSRStyle），以标记需要在服务器端渲染的元素/属性/样式等。
<div class="container" ngxSSR>
<h1 class="text-bold" ngxSSRAttrs>
Hello World!
</h1>
<p class="text-gray" ngxSSRStyle>
Some text.
</p>
</div>5. 运行应用
现在，你可以通过以下命令运行应用程序：
npm run build:ssr && npm run serve:ssr
现在，访问http://localhost:4000即可看到渲染后的HTML文档。
总结
通过@ngx-universal/express-engine，你可以轻松地在Angular应用程序中实现服务器端渲染。本文介绍了如何使用该NPM包，并提供了示例代码。希望能帮助读者更好地理解该技术及其实现原理，以在实际应用中发挥优化性能的作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005609d81e8991b448deda1