How to change default port number from 4200 in Angular applications

There are 3 ways to change an Angular application’s default port number from 4200:

1. Add the --port option when running the ng serve command
2. Add the --port option in your npm start script
3. Specify the default port in angular.json file

By default, Angular will serve your web application at port 4200.

Change the port when running the ng server command

To change this default port, you can add the --port option when running the ng serve command. The following example change the port used by Angular to 5200:

ng serve --port 5200

Once the build is finished, look at the output to see if Angular has used the specified port:

** Angular Live Development Server is listening on localhost:5200,
open your browser on http://localhost:5200/ **

Here, you can see that Angular Development Server successfully opens port 5200 for connection.

Changing the default port this way requires you to specify the port every time you want to run the application.

Change the default port in npm start script

To permanently change the default port used by Angular, you can specify the --port option inside the start script in your package.json file.

You need to open the package.json file and modify the start script as shown below:

{
  "name": "ng-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --port 5200",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  // other parameters
}

In the above example, you can see that the start script now includes the --port option, with the port specified at ‘5200’.

You can use the npm start command to run the application at the specified custom port.

Specify the default port in angular.json file

Angular version 10 and above generates an angular.json file, which specifies the default port used to run the application.

Open the angular.json file and look for the serve configuration in that file. You should see a configuration as follows:

{
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "configurations": {
      "production": {
        "browserTarget": "ng-app:build:production"
      },
      "development": {
        "browserTarget": "ng-app:build:development",
        "port": 5200
      }
    }
  }
}

Inside the serve configuration, you change the port parameter to the configurations.development parameter as shown above. If the parameter doesn’t exist, you can add it.

When you run the ng serve or npm start command, the port specified in this angular.json file will be used if you don’t specify a custom port with the --port option.

Conclusion

In this article, you’ve learned how to change the default port used by Angular to any custom port you want the application to use.

One more thing you need to know is that Angular will ask you if you would like to use a different port if the default port is already in use:

? Port 4200 is already in use.
Would you like to use a different port? (Y/n) 

In the previous version of Angular, an error message will be shown when the port is already used:

An unhandled exception occurred: Port 4200 is already in use. 
Use '--port' to specify a different port.

This error still occurs if you answer ’no’ when Angular asked if you would like to use a different port.

And that’s all I got for today. Happy coding! 🙌