能否配置Angular CLI仅在保存时触发热重载并避免提前重载？

这个问题我之前帮好几个开发者解决过——确实，默认的Angular CLI热重载太灵敏了，有时候代码还在半编辑状态（比如括号没补全、引号没闭合），它就急着触发重建，搞得页面一片红，挺烦人的。

Angular CLI本身没有直接提供"仅在保存后重建"的选项，但我们可以通过两种方式实现这个需求：

方法一：修改编辑器的自动保存行为 #

这是最直接且零配置的方案：

• 关闭编辑器的自动保存功能，改成手动保存（比如VS Code里按Ctrl+S/Cmd+S）。这样只有当你确认代码语法正确、编辑完成后手动保存，Angular的watch机制才会检测到文件变更，触发热重载。
• 如果不想完全关闭自动保存，也可以设置编辑器的"自动保存"为"当窗口失去焦点时"，这样你切换到浏览器之前再保存，也能避免中途触发重载。

方法二：自定义Webpack配置，延迟触发编译 #

如果需要保留编辑器的自动保存，又想避免临时编辑状态触发重载，可以通过自定义Webpack配置，给文件变更检测加个延迟：

1. 首先安装自定义Webpack构建器：

   npm install --save-dev @angular-builders/custom-webpack
   

2. 在项目根目录创建webpack.custom.js文件，添加以下配置：

   module.exports = {
     watchOptions: {
       // 设置延迟时间，比如3000ms（3秒），给你足够时间完成编辑
       aggregateTimeout: 3000,
       // 忽略node_modules目录，提升监听效率
       ignored: /node_modules/
     }
   };
   

3. 修改angular.json里的serve配置，替换默认构建器为自定义Webpack构建器：

   "architect": {
     "serve": {
       "builder": "@angular-builders/custom-webpack:dev-server",
       "options": {
         "customWebpackConfig": {
           "path": "./webpack.custom.js"
         },
         "liveReload": true,
         // 保留你原来的其他serve选项，比如port、open等
         "port": 4200
       }
     }
   }
   

4. 重新运行ng serve，现在Webpack会等待你设置的延迟时间后，再检测文件是否有最终变更，避免中途的临时编辑触发重载。

两种方案对比：方法一简单高效，适合大多数场景；方法二更灵活，适合依赖自动保存工作流的开发者。

内容的提问来源于stack exchange，提问作者Jack