angular nrwl/nx项目 hmr 开发热更新设置

最新推荐文章于 2024-09-03 08:13:19 发布

cen备忘录

最新推荐文章于 2024-09-03 08:13:19 发布

阅读量1.4k

点赞数

分类专栏： js angular nx

本文链接：https://blog.csdn.net/cen_cs/article/details/89178915

版权

本文介绍了如何在 Angular NRWL/NX 项目中设置热模块替换（HMR）以实现热更新。首先，提到了 Nx 框架的简介链接，接着详细说明了配置步骤：包括 angular.json 文件的调整，environment 目录下 hmr.ts 和 main.ts 文件的设置，以及在启动项目时使用特定命令。当遇到 main.ts 报错时，提示在 tsconfig.app.json 中添加 "types": ["node"] 配置来解决。完成这些步骤后，修改代码并保存，页面将不再刷新，提高了开发效率。

摘要由CSDN通过智能技术生成

如题：angular nrwl/nx项目 hmr 热更新设置

nx介绍：https://nx.dev/getting-started/what-is-nx

设置：

1、angular.json设置：

// 对应 app 的build与serve下的configurations加 hmr, 同时设置environments目录相应ts
"build": {
"configurations": {
"hmr": {
  "fileReplacements": [
    {
      "replace": "apps/system-admin/src/environments/environment.ts",
      "with": "apps/system-admin/src/environments/environment.hmr.ts"
    }
  ]
}
},
}
"serve": {
"configurations": {
  "production": {
    "browserTarget": "midback-admin:build:production"
  },
  "hmr": {
    "hmr": true,
    "browserTarget": "midback-admin:build:hmr"
  }
}
}

app相应设置，先上个目录结构，以下标红箭头是需要配置的文件：