Hey there, let’s work through this frustrating issue step by step—when ng serve runs but you can’t connect to localhost:4200, there are a handful of common fixes to try:

1. First, Confirm ng serve Is Running Without Hidden Errors #

Take a close look at the terminal/command prompt where you ran ng serve:

• If you see red error messages about missing packages or build failures, run npm install to fix dependency issues first.
• If there’s a port conflict error (something like "Port 4200 is already in use"), switch to a different port with ng serve --port 4201 and try accessing localhost:4201 instead.

2. Check Windows Firewall Blocking the Dev Server #

Windows Firewall might be blocking Node.js (which runs Angular CLI) from accepting connections:

• Open Windows Defender Firewall > click "Allow an app or feature through Windows Defender Firewall".
• Look for node.exe in the list. If it’s missing, click "Change settings" > "Allow another app", browse to your Node.js install path (usually C:\Program Files\nodejs\node.exe), add it, and check both "Private" and "Public" boxes (at least "Private" for local networks).

3. Bypass Browser Cache and Extensions #

Cached data or misbehaving extensions can break the connection:

• Clear your browser’s cache, cookies, and browsing data, then restart the browser and try again.
• Alternatively, open an incognito/private window—this skips cached data and most extensions that might interfere.

4. Verify Your Hosts File Configuration #

A messed-up hosts file can prevent localhost from resolving correctly:

• Open Notepad as Administrator, then navigate to C:\Windows\System32\drivers\etc\hosts.
• Make sure these lines exist and aren’t commented out (no # at the start):

  127.0.0.1       localhost
  ::1             localhost
  

  Save the file if you made changes.

5. Update Node.js and Angular CLI to Compatible Versions #

Outdated tools often cause compatibility bugs:

• Check your Node.js version with node -v—Angular 4 requires Node.js 6.9.x or higher (LTS releases are safest). Update to a compatible LTS version if needed.
• Update the global Angular CLI to match Angular 4’s supported version: npm install -g @angular/cli@1.7.4
• Update your project’s local CLI dependencies too: npm install @angular/cli@1.7.4 --save-dev

6. Restart Everything (Yes, Really) #

Sometimes weird glitches get fixed with a fresh start:

• Close your terminal, browser, and restart your computer.
• After rebooting, run npm install again to ensure no files are corrupted, then start ng serve and test the connection.

If none of these work, share the full output from your ng serve command (any error logs or build messages) and we can dig deeper!

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