Angular 4执行ng serve后访问localhost:4200出现无法访问问题

Hey，我之前维护Angular 4项目的时候也碰到过完全一样的情况，结合你给出的版本信息（Node v8.11.1、npm 5.6.0），给你几个亲测有效的排查和解决步骤：

1. 先检查终端的启动日志 #

运行ng serve后，别着急马上访问页面，先盯着终端看有没有报错信息。比如最常见的就是端口4200被占用，如果是这种情况，换个端口启动就行：

ng serve --port 4201

之后访问http://localhost:4201试试。

2. 排查防火墙/杀毒软件的拦截 #

Windows自带的防火墙或者第三方杀毒软件经常会“误杀”本地开发服务器的请求，你可以暂时关闭防火墙（仅测试用，之后一定要打开），或者手动把Angular开发服务器加入允许访问的列表里。

3. 清理缓存并重装依赖 #

npm 5.x版本有时候会出现缓存损坏的问题，导致项目依赖加载异常，试试这套操作：

# 强制清理npm缓存
npm cache clean --force

# Windows系统删除依赖文件夹和锁文件：
del package-lock.json && rmdir /s/q node_modules

# macOS/Linux系统用这个：
rm -rf node_modules package-lock.json

# 重新安装依赖
npm install

# 再次启动服务器
ng serve

4. 检查hosts文件的localhost解析 #

有时候localhost的解析出问题也会导致无法访问，打开Windows的hosts文件（路径：C:\Windows\System32\drivers\etc\hosts），确认里面有这一行：

127.0.0.1       localhost

如果没有就加上，保存后重启浏览器再试。

5. 换用IP地址访问 #

如果localhost还是不行，试试直接用IP访问：

• 本地回环IP：http://127.0.0.1:4200
• 你的局域网IP（可以通过ipconfig查询）：比如http://192.168.1.100:4200

6. 确认Angular CLI版本匹配 #

Angular 4项目需要对应版本的Angular CLI（一般是1.x版本），你可以先查看本地CLI版本：

ng --version

如果版本不匹配，安装对应版本的CLI：

npm install @angular/cli@1.7.4 -g

安装完成后再启动项目试试。

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