Home > Software > How to Change the Default Port Number from 4200 in Angular Applications

How to Change the Default Port Number from 4200 in Angular Applications

Anastasios Antoniadis

Share on X (Twitter) Share on Facebook Share on Pinterest Share on LinkedInWhen developing Angular applications, the Angular CLI serves your app on a development server that runs on localhost:4200 by default. However, there might be situations where running your application on a different port is necessary. This could be due to port conflicts, where …

Javascript

When developing Angular applications, the Angular CLI serves your app on a development server that runs on localhost:4200 by default. However, there might be situations where running your application on a different port is necessary. This could be due to port conflicts, where the default port is already in use by another application, or specific requirements of your development environment that necessitate using a different port. Fortunately, Angular CLI provides flexibility in specifying a different port for your development server. This article will guide you through various methods to change the default port number from 4200 in Angular applications.

Method 1: Using the --port Flag with the ng serve Command

The simplest way to specify a different port for your Angular application is by using the --port flag directly in the ng serve command. This method is straightforward and suitable for one-off changes when you need to quickly switch ports.

ng serve --port 4300

This command will start the development server on localhost:4300. You can replace 4300 with any available port number of your choice.

Method 2: Configuring the Default Port in angular.json

If you frequently need to use a specific port other than 4200 for your project, it makes sense to configure this preference in your project’s angular.json file. This way, you won’t have to specify the --port flag every time you serve your application.

  1. Open the angular.json file at the root of your Angular project.
  2. Find the projects > [your-project-name] > architect > serve > options path in the JSON structure. If you haven’t renamed your project, the default project name is usually the name of the folder containing your Angular project.
  3. Add a new key-value pair for the port option within the options object:
"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "port": 4300,
    ...
  },
  ...
}
  1. Save the angular.json file. Now, when you run ng serve without any flags, the development server will start on the port you specified.

Method 3: Creating a Custom npm Script

Another approach to simplify the process of serving your Angular application on a different port is to define a custom npm script in your project’s package.json file. This method is useful if you’re managing multiple commands or configurations and want to keep them easily accessible.

Open the package.json file located at the root of your Angular project.

Locate the "scripts" section. You’ll likely see an existing script for "start" that maps to ng serve.

Add a new script with a descriptive name, specifying the port in the command. For example:

"scripts": {
  "start": "ng serve",
  "start:customPort": "ng serve --port 4300",
  ...
}

Save the package.json file. Now, you can start your development server on the custom port by running the following command:

npm run start:customPort

This custom script allows you to maintain multiple configurations for serving your app and switch between them easily.

Conclusion

Changing the default port number in Angular applications is a common requirement, and the Angular CLI provides several ways to achieve this. Whether you need a temporary change using the --port flag, a permanent configuration in angular.json, or the convenience of custom npm scripts, each method offers flexibility to suit different development needs. By understanding how to configure the port, you can avoid conflicts and tailor the development server to fit your specific environment, enhancing your Angular development workflow.

Anastasios Antoniadis
Follow me
0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x