Win11 WSL2下VS Code Dev Container中Angular 18 ng serve页面空白问题

排查与修复步骤 #

1. 修正端口映射与服务绑定地址 #

• 检查Dev Container配置文件devcontainer.json，确保已添加端口转发：

  "forwardPorts": [4200]
  

• 重启容器后，运行ng serve时指定绑定到容器的所有网络接口，避免仅绑定本地回环：

  ng serve --host 0.0.0.0 --port 4200
  

  可尝试通过localhost:4200或WSL实例IP（执行wsl hostname -I获取）访问。

2. 禁用默认SSR配置 #

Angular 18默认启用SSR，若容器内SSR服务启动异常未抛出前端可见错误，会导致页面空白：

• 创建新项目时直接禁用SSR：

  ng new my-app --ssr false
  

• 现有项目可修改angular.json，移除server节点相关配置，重新执行ng serve。

3. 验证Node版本兼容性 #

Angular 18要求Node.js版本为18.19+或20.9+，在容器内执行以下命令确认版本：

node --version

若版本不符，调整Dev Container的Node镜像版本至兼容范围。

4. 清除缓存并重新构建 #

• 清除Angular本地缓存：

  ng cache clean
  

• 删除依赖文件后重新安装：

  rm -rf node_modules package-lock.json
  npm install
  

• 重新启动开发服务。

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