什么是 @ngpack/hmr
@ngpack/hmr 是一个针对 Angular 应用程序进行热模块更新（HMR）的 npm 包。使用它可以在应用程序运行时快速更新代码，并且不需要重新加载整个页面即可查看更新内容。这大大提高了开发效率。
如何使用 @ngpack/hmr
安装
打开终端，使用 npm 安装 @ngpack/hmr：
npm install @ngpack/hmr
配置
在 Angular 项目的根模块中，引入 @ngpack/hmr：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ - ---- ------------------
-- -- -----------
------ - --------- - ---- --------------
-----------
------------- ---------------
-------- -
--------------
-- -- ---------
---------
--
---------- --------------
--
------ ----- --------- --然后，在 main.ts 中加入 HMR 相关代码：
-- -------------------- ---- -------
------ - -------------- - ---- ----------------
------ - ---------------------- - ---- ------------------------------------
------ - --------- - ---- -------------------
------ - ----------- - ---- -----------------------------
-- -- ----------------
------ - ------- - ---- --------------
-- ------------------------ -
-----------------
-
----- --------- - -- -- -
------------------------
---------------------------
---------- -- --------------------
--
-- -- ---
-- --------------- -
----------------
-----------------------
------------
-
---- -
--------------------------------------------- -----------
-完成以上配置后，我们可以在应用程序运行时进行代码更新了！
示例代码
app.component.ts
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------------ --------- ----------- --------- - ------ ------- ------- ------ ----------- ---------------------- - -- ------ ----- ------------ - ------- - ------- -------- -
app.module.ts
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ - ---- ------------------
------ - --------- - ---- -------------- -- -- ---------
-----------
------------- -
------------
--
-------- -
--------------
--------- -- -- ---------
--
---------- ---
---------- --------------
--
------ ----- --------- - -main.ts
-- -------------------- ---- -------
------ - -------------- - ---- ----------------
------ - ---------------------- - ---- ------------------------------------
------ - --------- - ---- -------------------
------ - ----------- - ---- -----------------------------
------ - ------- - ---- -------------- -- -- -------
------ - ------------------ - ---- ----------------------------- -- -- ------------------
-- ------------------------ -
-----------------
-
----- --------- - -- -- -
----------------------------------------------------
--
-- -- ---
-- --------------- -
----------------
-------------------------------------------------- -- --
------------------------------------------------------------
--
-----------------------
-
---- -
--------------------------------------------- -----------
-总结
现在，我们已经学习了如何使用 @ngpack/hmr 实现热模块更新。尝试着在 Angular 应用程序中使用它，并享受一种更高效的开发方式吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcc967216659e244886