介绍
ng4-engine 是一个 Angular 服务端渲染使用的 npm 包,它可以将 Angular 应用程序的服务器端渲染静态生成,以获得更高的 SEO 分数,同时提高了首次响应时间,并降低了服务器负载。此外,它还提供了自定义标签 ng4-engine
,用于将已渲染的 HTML 代码注入到应用程序中。
安装和使用
首先,在你的 Angular 应用程序根目录下安装 ng4-engine:
--- ------- ---------- ------
然后,将 AppModule 中的 BrowserModule
导入改为 BrowserModule.withServerTransition
,指定应用程序的根模块(即 AppModule
)并启用首次服务器端渲染:
------ - ------------- - ---- ---------------------------- ------ - -------- - ---- ---------------- ------ - ---------------- - ---- ----------------------- ------ - ----------------------- - ---- --------------------------------------- ------ - ----------- - ---- ----------------- ------ - ---------------- - ---- ----------------------- ------ - ------------ - ---- ------------------ ------ - ------------ - ---- ------------------------- ------ - ----------------------- - ---- ---------------------- ------ - ------------- -- ------------ - ---- --------------------------- ------ - ------------ -- ------------------ - ---- ------------------------- ------ - --------- - ---- --------------- ----------- ------------- -------------- -------------------- -------- - ---------------------- ------------------------------------ ------ ------------ --- ------------- ----------------- ----------------- ------------ ------------------------ ------------- ------------------------ --------- -- ---------- --- ---------- -------------- -- ------ ----- --------------- - ------------ ------- -------- ------- ------- ------- -------- --------------- -------------- - -- --------------- - -------------------------------- -- - ------------------------ -- - -------------------------------------------------- --- --- - -
在 AppModule
中导入 BrowserTransferStateModule
来将应用程序状态进行传输:
------ - -------- - ---- ---------------- ------ - -------------- -------------------------- - ---- ---------------------------- ------ - ----------------- ---------- - ---- ----------------------- ------ - ------------ - ---- ------------------ ------ - ---------------- - ---- ----------------------- ------ - ------------ - ---- ------------------------- ----------- ------------- --------------- -------- --------------- ----------------- ----------------- ------------- ---------------------------- ---------- --- ---------- -------------- -- ------ ----- --------- --
现在,使用 ng build --prod
命令来构建应用程序的所有部分和服务器端版本。构建完成后,在生成的 dist
目录中可以找到 server.js
文件。
在根目录下创建一个名为 index.ts
的文件,用于将服务器端导出为一个函数。它将作为 Express 应用程序的启动器:
------ ------------------------- ------ ------------------- ------ - -------------- - ---- ---------------- ------ - ---------------- - ---- ------------------------------------------- ------ - -- ------- ---- ---------- ------ - -- ---- ---- ------- ------ - ------------- -------- - ---- ----- ------ - ---- - ---- ------- ----------------- ----- --- - ---------- ----- ---- - ---------------- -- ----- ----- ----------- - ------------------- -------- ----- -------- - -------------- ----- ------ - ------------------ ----- -------- - ------------------------------ --------- ---------- -------------------------- ----- ------ - ------------------------------ ----- -------- - ---------------- ---------------- - ------- ------------------ - --------- ------------------- - ----------------- ------------------ --- -------- --------- -- - ----- ------ - ----------------- ---------- ------------------ ---------- ------------------------------------ --- --------- -------- ---------- --- ------------- -------- -------- ---------------- ----------------- --------- ------------ ------------ ----- ---- -- - ------------------- - ---- ---- ---------- -- -------- -------------- --------- ----------- --- --- --- -------- ----- - ---------------- -- -- - ----------------- ------ --------- -- --------------------------- --- - --------- ---------------------- --------- --------- ----------- ------- ----- ------- -- - -- ----- - -------------------- ---------- ----- --------------- - ----- ----------------- - ------ --------- -- - ----- ------ - ------------------- ----- - - --- --------- ------- - ------------- ---------------- ---------- ------ ---------- -- ----- -------- - - ----- ----- ---------- ------ -- -- -- ---------- -- ----- ---------------- - -------------------------- -- -- ---------- -- ----- --------- - --------------------------- -- --- ---------- ----- --------- - --- ----------- ----- --------- -------------------- --- -------------------- --- --- - -- ------
在以上代码中,domino
库用于模拟浏览器的全局变量 window
,ngExpressEngine
是 Angular 的 Express 引擎,用于将模板和数据渲染为 HTML。 provideModuleMap
提供给 ngExpressEngine
用于将与应用程序集成的 lazy-loaded 模块映射到文件位置的 token。
现在运行 Express 服务器:
--- --- ---------
这个命令会执行 tsc ./index.ts && node ./index.js
,编译和运行 index.ts
。
最后在终端中打开应用程序地址,就可以看到服务器端渲染的应用程序:
---------------------
自定义标签
在你的 Angular 应用程序中添加 ng4-engine
自定义标签:
------ ------------------------- --------------------- -------
这里是 ng4-engine
服务的重点。第一步是创建一些初始状态:
------ --------- ---------------- - ----- ------- -------------------- ------- -------------------- ------- - --------- ------------------------- - -------------------- -------- ---------------------------- -------- --------------------------- -------- -
接下来就可以开始构建自定义元素:
------------ --------- ------------- --------- ---------------------------- ---------------- ------------------------------ -- ------ ----- --------- ---------- ---------- ------ - ------- -------- ---- ------- ------- -------------------------- ------- -------------------- ------- ------- -------------------- ------- ------- ----- ------- ------------------------- - ----- ---------- -- ------------ ----------- ------- --------------- --------- -------------------- ----------------- - --------- - ------------- ------------------------ - ---------------------------- ------------------------ - ---------------------------- ------------------- - ------------------- ----------- - - --------------------------- ------ ---------------------------- ------ -------------------- ------ -- - ------------- - ------------------------------- - ---------- - ----- ---- - ----- --------------------------- - ------- ------------------------- - ------------------------------- - ------ -- ---------------- -- ---------- - ----------------------- ------------------- --------------------- -- - --------------------------- -- - -- ----------------------------------------- - ----------------- - --- -- -------------- -- - ------------------- --- - - ------- ---------------- ------- - ----- ------ - --- ------------ ----- --- - ---------------------------- ------------- -- --------------------------- - -- - ----- --------- - ---------------------- -- ------------ ------------------- - --- ------------------------------------------- - - ------- -------------- -------- - ----- ----------- - --------------------------------------------------------- ----- ---------- - ---------------------------------------------------- ------ ------------------ - - - ----------- - ----------- - ------- ------------------ ------------- -------- - ------ ----------------------------------- - ------- ----------------------- ------------- -------- - ----- ----- - ------------------------ -- -------------- --- -------- - --- --- ---- - - -- - - ------------- ---- - -- ----------------- --- -------------- - ------------------------ - - ------ --------------- - - - ---------------------- - --- - -
代码解释:
- 使用
html
属性初始化标签,然后定义一些状态和选项。 - 构建
ngOnInit()
方法,使用injectHTML()
方法从当前实例构建的 html 渲染问商城的视图。 - 最后,重载
ngOnDestroy()
方法并在销毁标签时反注册服务工作者。
在应用程序模块中引入 BrowserModule
和 CUSTOM_ELEMENTS_SCHEMA
,来支持自定义元素。
------ - ------------- - ---- ---------------------------- ------ - --------- ---------------------- - ---- ---------------- ------ - ------------ - ---- ------------------ ------ - --------- - ---- ------------------------- ----------- ------------- -------------- ----------- -------- ---------------- ---------- --- ---------- --------------- -------- ------------------------ -- ------ ----- --------- --
最后,使用以下代码将服务端渲染后的 HTML 插入 ng4-engine
标签中:
----- ------ - --- ----------- ----- ------ -- ------- ---- -------------------- --- -------------------- --- ---
总结
有了 ng4-engine 模块,你可以启用服务器端渲染,并在应用程序中使用自定义元素,以实现更高的 SEO 分数,并缩短加载时间。通过本文的介绍,你可以详细了解 ng4-engine 的使用方法,以及如何为应用程序添加自定义元素。同时也希望本文对你提供了一些思路,帮助你更好地构建 Angular 应用程序。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/600562d781e8991b448e0328