Angular CLI启动服务提示监听localhost:4200但浏览器无法访问该地址

解决方案 #

• 核对访问地址
  Angular CLI 启动的服务默认监听4200端口，需完整访问http://localhost:4200，仅输入localhost会默认访问80端口，和服务监听端口不匹配会导致无法访问。
• 排查端口占用
  打开CMD执行命令netstat -ano | findstr "4200"，如果存在返回结果说明4200端口被其他程序占用。可以结束占用端口的对应进程，或者启动Angular服务时指定其他端口：

  ng serve --port 4300
  

  启动后访问对应端口即可。
• 校验本地hosts配置
  打开路径C:\Windows\System32\drivers\etc\hosts，确认存在如下配置：

  127.0.0.1       localhost
  

  如果缺失就手动添加后保存，再尝试访问。
• 排查防火墙拦截
  临时关闭Windows系统防火墙测试访问是否正常，如果关闭后可正常访问，将Node.js和Angular CLI添加到防火墙允许通行白名单即可。
• 显式指定服务绑定地址
  启动服务时添加host参数，强制绑定到本地回环地址：

  ng serve --host 127.0.0.1
  

  启动后访问http://127.0.0.1:4200测试即可。

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