Angular项目ng serve运行时站点无法自动重载问题求助

我明白你遇到的困扰——之前正常运行的项目，现在修改HTML和SCSS后浏览器无法自动重载，而且试过很多方案都没解决。结合你的项目配置（Angular 4.3.1、@angular/cli 1.6.3），我给你几个针对性的排查步骤：

1. 彻底清理缓存并重启开发服务 #

缓存堆积是热重载失效的常见原因，按以下步骤操作：

• 先按下 Ctrl+C 停止当前的 ng serve 进程
• 删除项目根目录下的 dist 文件夹
• 清理npm缓存：npm cache clean --force
• 删除 node_modules/.cache 文件夹（如果存在的话）
• 重新安装依赖：npm install
• 最后重启服务：ng serve

2. 检查Angular CLI配置文件的热重载开关 #

Angular 4.x使用的是 angular-cli.json 配置文件，确认里面的热重载相关配置是否开启：
打开 angular-cli.json，找到 defaults 节点，确保以下配置存在且为 true：

"defaults": {
  "serve": {
    "liveReload": true
  },
  "build": {
    "watch": true
  }
}

如果没有这些配置，直接添加进去即可。

3. 解决依赖版本冲突问题 #

我注意到你的 package.json 里，dependencies 和 devDependencies 都包含了 @ngtools/webpack，这可能导致版本冲突，影响热重载功能：

• 打开 package.json，删除 dependencies 中的 "@ngtools/webpack": "^1.9.3" 这一行
• 重新运行 npm install 安装依赖
• 再次启动服务测试热重载

4. 禁用Build Optimizer #

旧版本的Build Optimizer可能和Angular 4.x的热重载机制不兼容，尝试禁用它：
修改 package.json 中的 start 命令：

"scripts": {
  "start": "ng serve --build-optimizer false"
}

然后重启 npm start 测试效果。

5. 检查系统文件监听限制 #

部分Linux系统对文件监听的数量有限制，当项目文件较多时会导致热重载失效，你可以尝试增加监听上限：
在终端运行以下命令：

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

之后重启开发服务测试。

6. 排查文件路径与命名问题 #

确保你修改的HTML和SCSS文件满足以下条件：

• 文件位于项目的 src/app 目录下（Angular CLI默认只监听src目录内的文件）
• 文件名没有大小写不一致的问题（比如组件类引用的是 Header.component.scss，但实际文件是 header.component.scss，部分系统会区分大小写导致监听失效）

如果以上方案都无法解决问题，你可以尝试创建一个全新的Angular 4.x项目，逐步将现有代码迁移过去，排查是否是原项目的配置文件损坏导致的问题。

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