Changing the Default Port (4200) in Angular

Introduction

Angular, a popular platform for building web applications, by default runs its local development server on port 4200. However, there may be instances where you need to modify this default port. This could be due to conflicts with other processes, company policies, or simply personal preference. This tutorial will guide you through the steps to modify the default port in Angular.

Using the --port Flag

The simplest way to change the default Angular port is by using the --port flag while starting the Angular server. This flag allows you to specify the port number on which the server should run. Here's an example:

$ ng serve --port 4500

In this case, the Angular server will start on port 4500 instead of the default port 4200.

Note: This is a temporary change and the port will revert back to 4200 the next time you start the server without the --port flag.

Setting Default Port in angular.json

If you want a permanent change in the default port, you can modify the angular.json file in your project's root directory. This file contains configurations for your Angular project.

To change the default port, locate the serve object within the architect object. Add a port option within the options object and set it to your desired port. Here's an example:

"architect": {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "your-project-name:build",
      "port": 4500
    },

With this change, every time you run ng serve, the server will start on port 4500.

Changing the Port without Modifying angular.json

If you want to change the default port without modifying the angular.json file, you can create a script in your shell. This script will execute the ng serve command with the --port flag.

For instance, if you're using a Unix-like operating system, you can add the following line to your .bashrc or .zshrc file:

alias ngserve="ng serve --port 4500"

Now, every time you execute the ngserve command, the Angular server will start on port 4500.

Handling Port Conflicts

Sometimes when you try to run your Angular application on a specific port, you may encounter a port conflict. This happens when the port is already in use by another process. Angular provides a solution for this by automatically selecting an arbitrary port when the default port is in use.

To allow Angular to select an arbitrary port, you can use the --port 0 option:

$ ng serve --port 0

When you run this command, Angular will find an open port and serve your application on it. You will see an output similar to the following:

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

In this case, Angular has selected port 49152. You can then open your browser and navigate to http://localhost:49152/ to test your application.

How to Terminate Processes Running on Port 4200

There might be situations where you need to terminate the process running on port 4200. This could be due to a number of reasons such as a hung process, or needing to free up the port for another application.

Link: For a more in-depth explanation of this process, see the following: Find which Process is Listening to a Port.

On Unix-based systems like Linux and macOS, you can use the lsof command to find the process ID (PID) that is using port 4200 and then use the kill command to terminate it. Here is how you can do it:

$ lsof -i :4200

This will output something like:

COMMAND   PID  USER   FD   TYPE  DEVICE SIZE/OFF NODE NAME
node    12345  user   23u  IPv6 1234567      0t0  TCP *:4200 (LISTEN)

In this example, the PID is 12345. You can then use the kill command to terminate this process:

$ kill -9 12345

On Windows, you can use the netstat command to find the PID and then use the taskkill command to terminate it:

> netstat -ano | findstr :4200

This will output something like:

TCP    0.0.0.0:4200           0.0.0.0:0              LISTENING       12345

In this example, the PID is 12345. You can then use the taskkill command to terminate this process:

> taskkill /PID 12345 /F

Here, the /F option is used to forcefully terminate the process.

Conclusion

In this Byte, we've covered how to handle port conflicts in Angular by allowing Angular to select an arbitrary port. We've also learned how to terminate processes running on a specific port.