Angular热重载失效并报ENOENT文件不存在错误求助

我的Angular项目此前运行完全正常，但突然热重载功能失效，每次刷新页面都会出现错误。查看错误提示的文件路径，发现缺少指定的4.pack文件，但不清楚该文件的作用，无法进行替换。尝试新建名为4.pack的文件，它却自动重命名为4 3.pack，而该路径下存在4 2.pack文件。

错误信息：

node:internal/process/promises:289
            triggerUncaughtException(err, true /* fromPromise */);
            ^

[Error: ENOENT: no such file or directory, stat '/Users/kevinbacon/Desktop/dev/kbcoding/frontend/kbcoding/.angular/cache/16.2.8/angular-webpack/f1ebbe6c6eeda44ad327399b3c7637f8751878c4/4.pack'] {
  errno: -2,
  code: 'ENOENT',
  syscall: 'stat',
  path: '/Users/kevinbacon/Desktop/dev/kbcoding/frontend/kbcoding/.angular/cache/16.2.8/angular-webpack/f1ebbe6c6eeda44ad327399b3c7637f8751878c4/4.pack'
}

.pack文件是Angular缓存目录中webpack生成的临时打包文件，手动创建无效，因为这类文件带有webpack内部的哈希标识，必须由构建工具自动生成。以下是可行的解决步骤：

• 彻底清除Angular缓存

  1. 按下Ctrl+C停止当前运行的开发服务器
  2. 执行命令清除缓存：ng cache clean
  3. 如果命令清理无效，直接手动删除项目根目录下的.angular/cache文件夹，这是最直接有效的方式

• 重置依赖（如果缓存清理后仍无效）

  1. 删除node_modules文件夹以及package-lock.json（或yarn.lock）文件
  2. 重新安装依赖：npm install（或yarn install）

• 强制无缓存启动开发服务器
  执行ng serve --no-cache启动项目，此命令会跳过本地缓存，让webpack重新生成所有必要的打包文件。如果启动正常，后续可恢复使用ng serve，缓存会自动重建正确的文件结构

• 检查文件权限
  如果手动创建文件时出现自动重命名，可能是项目目录的读写权限异常。确保当前用户对项目文件夹有完整读写权限，Mac/Linux可执行chmod -R 755 /你的项目路径修复权限（Windows可右键文件夹→属性→安全选项卡调整权限）

内容的提问来源于stack exchange，提问作者Kevin B.