Angular/CLI: How to change the port for auto reload?

Question

As I understand when running ng serve the Angular app polls the dev server to find out if a reload is necessary. This server is expected to live on port 4200 (default).

I run a dev environment with multiple docker container to keep things nice and isolated. So some of my angular apps listen on different ports. This seems to lead to the following error message appearing in my browser console every couple of seconds:

zone.js:2744 GET http://localhost:4200/sockjs-node/info?t=1518533495440 net::ERR_EMPTY_RESPONSE

Where can I change the configuration to point the live reload client in the correct direction? angular-cli.json doesn't seem to do anything.

Answer 1

I found the solution. You have to start ng serve with the --public-host option (aliases: --live-reload-client). So I adapted my start command in the package.json from

"start": "ng serve --host 0.0.0.0"

to

"start": "ng serve --host 0.0.0.0 --live-reload-client http://localhost:4400"

The whole point is that I don't want to change the port of the dev server itself. It should run inside the Docker container on port 4200. But port 4200 is mapped in Docker to the outside port 4400 (in my case). I call http://localhost:4400 to run the app in my browser and the reload client should also call http://localhost:4400 for updates. But it called http://localhost:4200. With the --live-reload-client option everything works.

Answer 2

You can configure the default HTTP port and the one used by the LiveReload server with two command-line options :

ng serve --host 0.0.0.0 --port 4201 --live-reload-port 49153