Angular执行ng serve不显示代码修改仅展示初始页面如何解决

问题成因 #

• 构建配置指向错误：angular.json中build/serve节点的入口文件、输出路径配置异常，导致dev server始终读取首次构建生成的旧静态文件，未关联src目录下的实际代码
• 缓存异常：分为本地构建缓存、浏览器缓存两类，Angular12对接PWA时默认注册的Service Worker会强制缓存首次加载的index.html，本地webpack构建缓存损坏时也会持续输出旧构建产物
• 文件监听失效：在WSL2跨盘挂载、部分Windows权限受限场景下，Angular12依赖的webpack文件监听机制无法捕获src目录下的代码改动，不会触发增量重编译
• 入口引用错误：根引导文件、根模块配置不匹配，修改组件后未被纳入构建入口链路，导致渲染内容始终停留在初始状态

修复步骤 #

按优先级依次操作，每步完成后重启ng serve验证效果：

1. 全量清理缓存
   停止正在运行的dev服务，执行对应命令删除本地构建缓存与旧产物：

   # Linux/macOS/WSL
   rm -rf node_modules/.cache dist
   # Windows (cmd)
   rmdir /s /q node_modules\.cache dist
   

   清理完成后先执行一次ng build，检查输出的dist目录下的index.html是否为当前代码对应的最新内容，如果构建产物仍为旧初始页面，直接进入下一步配置检查。

2. 核对angular.json核心配置
   打开项目根目录的angular.json，定位到projects.[你的项目名].architect节点，核对以下配置：

   • build节点下的index字段必须指向src/index.html，不能指向dist目录或其他位置的旧静态文件
   • build节点下的outputPath默认值为dist/[你的项目名]，不能配置为src目录或项目根目录
   • serve节点下的browserTarget值必须为[你的项目名]:build，不要额外配置固定的index路径覆盖build规则
   • 注意：如果项目启用了PWA，build节点下的serviceWorker字段在开发阶段需要设为false，该配置在Angular12开发模式下会强制返回缓存内容，生产构建时再改回true即可。

3. 清除浏览器端缓存
   打开浏览器开发者工具，切换到「网络」面板，勾选禁用缓存（Disable cache），之后右键点击浏览器刷新按钮，选择「清空缓存并硬性重新加载」。如果之前启用了PWA，切换到开发者工具的「应用」面板，找到Service Worker选项，点击注销所有已注册的服务工作线程，再刷新页面验证。

4. 修复文件监听失效问题
   如果修改代码后控制台完全不出现重新编译的日志，说明文件监听未生效，启动服务时增加轮询参数强制检测文件变动：

   ng serve --poll=2000 --live-reload --watch
   

   该参数会让构建进程每2秒扫描一次文件变动，可解决跨系统挂载、权限不足导致的监听失效问题。

5. 核对入口链路
   检查src/main.ts的根引导逻辑，确认引导模块为项目实际的根模块；检查src/app/app.module.ts的bootstrap声明，确认挂载的根组件为当前正在修改的AppComponent；同时确认src/index.html中存在<app-root></app-root>根挂载节点，节点缺失时Angular无法渲染组件，会直接显示index.html内的静态初始内容。

6. 依赖修复
   若以上操作均无效，删除node_modules目录与对应锁文件（package-lock.json/yarn.lock/pnpm-lock.yaml），重新执行包安装命令，修复Angular CLI内置构建工具的文件损坏问题。

内容的提问来源于stack exchange，提问作者1508.dev