Angular 18代码修改后浏览器不生效，需重新构建问题排查

1. 确保使用正确的开发启动命令 #

不要使用ng build --watch（仅监听代码编译，无浏览器自动重载能力），必须执行以下命令启动带热重载的开发服务器：

• 基础启动：npm run start（对应ng serve，Angular 18默认已开启热重载）
• 带代理配置启动：npm run start:proxy
• 启用模块热替换（HMR）：npm run start:hmr

2. 检查Angular CLI核心配置 #

打开项目根目录的angular.json，确认项目的serve配置中热重载功能已启用：

"projects": {
  "your-project-name": {
    "architect": {
      "serve": {
        "options": {
          "liveReload": true, // 确保此值为true，默认应该开启
          "hmr": false // 若要默认启用HMR可设为true，也可通过命令行参数--hmr临时开启
        }
      }
    }
  }
}

3. 修复HMR功能（普通热重载无效时尝试） #

如果执行npm run start:hmr仍无效果，需在src/main.ts中添加HMR初始化代码：

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
import { enableProdMode } from '@angular/core';

if (import.meta.env.PROD) {
  enableProdMode();
}

// 新增HMR支持代码
if (import.meta.hot) {
  import.meta.hot.accept();
}

bootstrapApplication(AppComponent, appConfig)
  .catch(err => console.error(err));

4. 清理缓存 #

• 清除Angular CLI本地缓存：执行ng cache clean
• 浏览器端：打开开发者工具（F12），勾选Disable cache选项，避免浏览器缓存旧资源导致变更不生效

5. 检查环境依赖与权限 #

• 确认Node.js版本符合要求：Angular 18需要Node.js 18.19.x、20.9.x或更高版本，执行node -v检查
• 重新安装依赖：删除node_modules文件夹和锁文件（package-lock.json），执行npm install；若存在peer依赖冲突，可使用npm run legacy替代

6. 排查文件监听异常 #

• 确认修改的文件不在angular.json的exclude配置范围内，避免CLI忽略文件变更
• 检查项目文件权限：确保当前用户对项目文件有可读可写权限，防止CLI无法检测到文件修改

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