How to change angular port from 4200 to something else

In this Angular article, we will see how to change angular port from 4200 to something else. When we run angular application it runs on port 4200. But you can change it when you run angular application.

There are couple of ways you can change the angular port.

Using ng serve –port flag
Define default port in angular.json file

Using ng serve –port flag

When you run angular application by default Angular CLI ng serve command will use port 4200.

But you can specify other port number by using –port flag followed by port number to ng serve command .

so you can specify as following:

ng serve --port 4100

Here in the above command we have specified 4100 port and it will run angular application on 4100 port.

In the latest version of angular, angular ask to specify port number if port is already in use. which is really good feature provided by angular.

Define default port in angular.json file

In angular version 10+, you can specify the default port number in angular.json file.

"projects": {
    "my-cool-project": {
        ... rest of project config omitted
        "architect": {
            "serve": {
                "options": {
                    "port": 4100 <-- add your custom port number here      
                }
            }
        }
    }
}

You can update port number inside serve configuration object like I shown in above code.

so this was the way to change port number using angular.json.

I hope you like this How to change port number in angular article. 🙂