随着前端技术的不断发展和完善，前端渲染技术也越来越成熟，尤其是近年来兴起的服务端渲染技术，可以帮助我们有效地提高页面首屏渲染速度和 SEO 的效果。@hapiness/ng-universal 就是一个基于 Angular 6+ 实现的服务端渲染库，可以快速实现服务端渲染。
安装和使用
我们需要在项目中安装 @hapiness/ng-universal 库：
npm install @hapiness/ng-universal
在使用之前，我们需要了解一些基本的使用方式和配置信息。
入口文件（main.server.ts）
@hapiness/ng-universal 需要我们自行创建一个 main.server.ts 文件作为服务端渲染的入口文件。通常情况下，我们会在基于 Angular CLI 生成的项目中进行如下配置：
// main.server.ts
export { AppServerModule } from './app/app.server.module';主模块（AppModule）
我们需要将主模块转化为一个支持 Angular Universal 的模块，这样我们的服务端才能够把应用程序渲染到 HTML 中。我们需要创建一个 AppServerModule 类并实现 ngModuleFactory 的方法，返回一个已经预先编译好的模块工厂。具体来说，我们需要基于 AppModule 创建一个 AppServerModule，代码如下：
-- -------------------- ---- -------
-- --------------------
------ - -------- - ---- ----------------
------ - ------------ - ---- ---------------------------
------ - --------- - ---- ---------------
------ - ------------ - ---- ------------------
-----------
-------- -
----------
-------------
--
---------- ---------------
--
------ ----- --------------- - -配置文件（webpack.server.config.js）
我们还需要为服务端打包生成的 JavaScript 文件单独配置一个 Webpack 打包文件，我们可以创建一个 webpack.server.config.js 文件，需要在里面完成以下配置（下面代码提供一个简单的示例）：
-- -------------------- ---- -------
-- ------------------------
----- ---- - ----------------
----- ------- - -------------------
----- ------------- - ----------------------------------
----- - --------------------- - - ----------------------------
-------------- - -
----- --------------
------ - ------- ---------------------- --
-------- - ----------- ------- ------ --
------- -------
---------- ------------------
------- -
----- -------------------- --------
--------- -----------
--
------- -
------ -- ----- -------- ------- ------------------ --
--
-------- -
--- -----------------------
------------- -----------------------
--------- -----------------------
------------ ---------------------------------------------
--
-
--完成以上配置之后，我们就可以在 package.json 中添加需要的 NPM scripts，如下：
{
"scripts": {
"build:server": "webpack --config webpack.server.config.js",
"build": "ng build && npm run build:server",
"start:express": "node dist/server.js",
"start": "npm run build && npm run start:express"
}
}示例代码
最后，提供一个简单的示例供大家参考和学习。
server.ts
-- -------------------- ---- -------
-- ---------
------ -------------------------
------ -------------------
------ - -- ------- ---- ----------
------ - ---- - ---- -------
------ - ------------ - ---- -----
------ - --------------- ---------------- - ---- ----------------
------ - ------------------- ------------------------ - ---- ---------------------------
----- - ------------------------ - - ------------------------------
-----------------
----- --- - ----------
------------------ --- -------- --------- -- -
----- ---- - - --------- -------------------------------- ------- ---------- -------------- ------- --
------------------------------------------ - --------------- -------------------- -------------------------- ------- ------------ -- -
-------------- ------
---
---
------------- -------- --------
---------------- ------------------- ------- ------------
------------------------------------------ ------- ----------- - ------ ----- ----
------------ ----- ---- -- -
------------------- - --- ---
---
------------ ----- ---- -- -
------------------------- --------
---
----- ---- - ---------------- -- -----
---------------- -- -- -
---------------------- -- ---------------------------
---main.ts
-- -------------------- ---- ------- -- ------- ------ - -------------- - ---- ---------------- ------ - ---------------------- - ---- ------------------------------------ ------ - --------- - ---- ------------------- ----------------- ------------------------------------------------------------- -- ------------------
app.module.ts
-- -------------------- ---- ------- -- ------------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ------------ - ---- ------------------ ----------- -------- ------------------------------------- ------ -------- ---- ------------- --------------- ---------- --------------- -- ------ ----- --------- - -
app.component.ts
-- -------------------- ---- ------- -- ---------------- ------ - --------- - ---- ---------------- ------------ --------- ----------- --------- ----------- ------------ -- ------ ----- ------------ - -
总结
本文介绍了如何使用 @hapiness/ng-universal 实现基于 Angular 的服务端渲染方案，我们需要在项目中引入并配置 main.server.ts、AppServerModule、webpack.server.config.js 等文件，并根据实际需求添加对应的 NPM scripts。在我们的示例代码中，我们演示了如何实现一个简单的服务端渲染页面。
总的来说，@hapiness/ng-universal 提供了一个方便快捷的服务端渲染工具，可以帮助我们在实际项目中有效地提高首屏渲染速度和 SEO 效果，从而提高用户体验和收益。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006734a890c4f7277583760