localhost:4200: Fixing the Angular Dev Server

Angular apps open on localhost:4200 because that is the port ng serve picks by default. When the page will not load, the cause is nearly always in the terminal: a build error stopped the server, ng serve is still compiling, or the CLI asked to use another port because 4200 was taken and is waiting for your answer.

Common ng serve situations
What you seeCauseFix
Refused to connectng serve not running or exited on an errorRun ng serve and fix the first error
Port 4200 is already in use promptAnother ng serve or app holds 4200Answer yes, or stop the other process
Page loads on PC, not on phoneServer bound to localhost onlyng serve --host 0.0.0.0
Invalid Host headerRequest came through an unknown host nameAdd the host to allowedHosts

Updated

The Angular CLI compiles the whole app before it serves the first page, so on a larger project there are several seconds where the port is not open yet. Wait for the line saying the application bundle is ready, then load the address it prints.

Set the port and host in angular.json

Serve options in angular.json

Edit the serve target under your project in angular.json and keep the builder line your project already has (older projects use @angular-devkit/build-angular:dev-server). These options apply every time you run ng serve.

"serve": {
  "builder": "@angular/build:dev-server",
  "options": {
    "port": 4300,
    "host": "0.0.0.0"
  }
}

The same for one session

Flags override angular.json for this run only.

ng serve --port 4300 --host 0.0.0.0 --open

Refused to connect: what ng serve is telling you

An Angular compile error, such as a missing import or a template referring to a property that does not exist, stops the build and leaves no server to talk to. The terminal lists the file and line; fix that first and the CLI rebuilds on save.

If the terminal is quiet and the prompt has returned, the server exited. Running ng serve outside the project folder is a classic cause: the CLI needs the angular.json it finds in the workspace root.

Reaching 4200 through a proxy or tunnel

When you open the dev server through a tunnel or a custom host name, the CLI may reject the request with 'Invalid Host header'. Add that host to allowedHosts in the serve options rather than switching the check off for every host.

To call a local API on another port without CORS errors, use the dev server's proxy configuration so the browser only ever talks to 4200.

If you only need a business website rather than a local project, We.Inc builds and previews the site in your browser, so there is no local server or port to manage.

How it works

  1. Run ng serve, or npm start in projects generated by the CLI.
  2. Wait for the build summary and the local address in the terminal.
  3. If the CLI asks about a different port, answer it or stop the process on 4200.
  4. To set a permanent port, add it under the serve options in angular.json.

Tips

  • ng serve --open builds, serves and opens the browser at the right address in one step.
  • A Node.js version outside the range your Angular version supports can stop the CLI with an engine error before anything listens. Check the Angular version compatibility table.
  • In a dev container or Docker, --host 0.0.0.0 is needed for the host machine to connect, as well as a published port.
  • If you see a stale app after switching branches, stop the server and start it again; the dev server caches build output in memory.

Frequently asked questions

What is localhost:4200?

It is the default address of the Angular CLI development server started with ng serve. It serves your app from memory with live reload while you work.

How do I change the Angular port from 4200?

Run ng serve --port 4300 for one session, or set "port": 4300 in the options of the serve target in angular.json so every ng serve uses it.

Why does localhost:4200 refuse to connect?

ng serve is not running, is still compiling, or stopped on a compile error. Look at the terminal. If it is waiting on the port question, it has not started serving yet.

How do I open my Angular app from my phone?

Start it with ng serve --host 0.0.0.0, then open http://<your computer's local IP>:4200 on the phone. Both devices must be on the same network and your firewall must allow the port.

How do I kill the process on port 4200?

On Mac or Linux, lsof -i :4200 gives the process ID for kill. On Windows, netstat -ano | findstr :4200 gives the PID for taskkill /PID <PID> /F.

Related: localhost:5173, localhost:3000, CORS explained, localhost:8080.

Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.

More in Guides

Product

Who It's For

Features

Resources

Company

View Sitemap