Angular编译成功但localhost:4200无法访问、连接被拒如何解决

问题复现 #

本地启动Angular开发服务时，控制台输出如下内容：

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
√ Compiled successfully.
当前命令行路径：PS E:\Angular projects\Test Project 1\cwh-todo-list>

控制台显示服务编译成功，提示可通过浏览器访问对应地址，但实际访问http://localhost:4200/时页面提示「无法访问此网站」，报错为localhost refused to connect（本地主机拒绝连接），站点无法正常加载。

修复步骤 #

• 优先修复host绑定异常：Windows环境下部分版本的Angular CLI默认会把服务绑定到IPv6回环地址::1，但系统hosts配置里localhost没有正确指向该地址时就会出现连接拒绝。先按Ctrl+C终止当前运行的服务，执行带明确host参数的启动命令：
  ng serve --host 127.0.0.1 --port 4200
  启动完成后访问http://127.0.0.1:4200即可正常加载页面。
• 如果需要支持同局域网其他设备访问，直接把host指定为0.0.0.0即可，启动后同时支持localhost、127.0.0.1、本机局域网IP三种方式访问：
  ng serve --host 0.0.0.0 --port 4200
• 排查端口占用问题：执行以下命令查询4200端口的实际监听状态：
  netstat -ano | findstr :4200
  如果返回结果中没有状态为LISTENING的对应node进程，说明服务属于假启动状态，按第一步指定host重启即可；如果返回结果显示其他进程占用了4200端口，换端口启动服务即可：
  ng serve --port 4201 --host 127.0.0.1
• 检查拦截规则：临时关闭系统全局代理、VPN、第三方安全软件的防火墙防护，这类工具经常会拦截本地回环端口的请求，导致连接被拒绝。
• 固化默认配置避免重复操作：打开项目根目录下的angular.json文件，找到projects -> 你的项目名 -> architect -> serve -> options节点，添加固定的host和port配置，后续直接执行ng serve就不需要手动加参数：

  {
    "host": "127.0.0.1",
    "port": 4200
  }
  

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