Customizing the Development Server Port in Angular

Angular’s development server defaults to port 4200. While this works perfectly well, you may need to change it for various reasons – perhaps another application is already using that port, or you need to serve multiple Angular applications simultaneously on different ports. This tutorial explains the different ways to configure the development server port in your Angular project.

Understanding the Approaches

There are several methods to change the Angular development server port:

1. Command-Line Argument: The quickest way to change the port is to use the --port flag when running the ng serve command.
2. angular.json Configuration: You can permanently set the port by modifying your project’s angular.json file. This is the recommended approach for consistent behavior.
3. package.json Script: Adjust the ng serve command within your package.json file’s scripts section to include the --port flag.
4. Legacy angular-cli.json (Angular CLI 1): Older Angular projects using Angular CLI version 1 used a file named angular-cli.json. Configuration for this is explained below.

1. Using the Command-Line Argument

This is the simplest method for a one-time port change.

Open your terminal, navigate to your Angular project directory, and run:

ng serve --port 5000

Replace 5000 with your desired port number. This will start the development server on the specified port. You can then access your application at http://localhost:5000/.

2. Configuring the Port in angular.json

To make the port change permanent, modify your angular.json file.

1. Open angular.json in your project’s root directory.
2. Locate the projects section. Within this section, find your project’s name (e.g., "my-project").
3. Inside your project’s configuration, find the architect section, and then the serve configuration.
4. Add or modify the options section and set the port property:

{
  "projects": {
    "my-project": {
      "architect": {
        "serve": {
          "options": {
            "port": 5000
          }
        }
      }
    }
  }
}

Save the angular.json file. The next time you run ng serve, it will automatically use port 5000.

Multiple Configurations:

If you have multiple configurations (e.g., "development", "production"), you can specify the port for each:

{
  "projects": {
    "my-project": {
      "architect": {
        "serve": {
          "configurations": {
            "development": {
              "port": 5000
            },
            "production": {
              // Other production settings
            }
          }
        }
      }
    }
  }
}

To use a specific configuration, run ng serve --configuration development (or production).

3. Modifying package.json

You can also set the port within your package.json file. This is useful if you want to easily start the server with a specific port using npm start or yarn start.

1. Open package.json in your project’s root directory.
2. Locate the scripts section.
3. Modify the start script to include the --port flag:

{
  "scripts": {
    "start": "ng serve --port 5000"
  }
}

Now, when you run npm start or yarn start, the development server will start on port 5000.

4. Configuring angular-cli.json (Legacy – Angular CLI 1)

If you’re working on an older Angular project using Angular CLI version 1, you’ll find the port configuration in the angular-cli.json file.

1. Open angular-cli.json in your project’s root directory.
2. Locate the defaults section.
3. Within the serve configuration, set the port property:

{
  "defaults": {
    "serve": {
      "port": 5000
    }
  }
}

Save the file, and the next time you run ng serve, it will use the specified port.

Best Practices

• Prioritize angular.json: Modifying angular.json is the recommended approach for consistently setting the port for your project.
• Avoid Direct File Modification of CLI files: Never directly modify files within the node_modules directory. These files are managed by npm/yarn and can be overwritten during updates.
• Consider Port Conflicts: Before changing the port, ensure that no other application is already using the desired port on your system.