How to change angular port from 4200 to any other

The solution worked for me was

ng serve --port 4401    

(You can change 4401 to whatever number you want)

Then launch browser -> http://localhost:4401/

Basically, I was having two Applications and with the help of the above approach now I am able to run both of them simultaneously in my development environment.

---

It seems things have changed in recent versions of the CLI (I'm using 6.0.1). I was able to change the default port used by ng serve by adding a port option to my project's angular.json:

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "projects": {
        "my-project": {
            "architect": {
                "serve": {
                    "options": {
                        "port": 4201
                    }
                }
            }
        }
    }
}

(Only relevant properties are shown in this example.)

---

You can change your application port by entering the following command,

ng serve --port 4200

Also, for a permanent setup you can change the port by editing angular-cli.json file

 "defaults": {
    "serve": {
      "port": 8080
    }
  }

---

Changing nodel_modules/angular-cli/commands/server.js is a bad idea as it will be updated when you install new version of angular-cli. Instead you should specify ng serve --port 5000 in package.json like this:

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

You can also specify host with --host 127.0.0.1

---

The location for port settings has changed a couple of times.

If using Angular CLI 1

Change angular-cli.json

{
  "defaults": {
    "serve": {
      "host": "0.0.0.0",
      "port": 5000 
    }
  }
}

If using the latest Angular CLI

Change angular.json

"projects": {
    "project-name": {
        ...
        "architect": {
            "serve": {
                "options": {
                  "host": "0.0.0.0",
                  "port": 5000
                }
            }
        }
        ...
    }
}

Without changing any file

Run the command

ng serve --host 0.0.0.0 --port 5000

---

No one has updated answer for latest Angular CLI.With latest Angular CLI

With latest version of angular-cli in which angular-cli.json renamed to angular.json , you can change the port by editing angular.json file you now specify a port per "project"

projects": {
    "my-cool-project": {
        ... rest of project config omitted
        "architect": {
            "serve": {
                "options": {
                    "port": 4500
                }
            }
        }
    }
}

Read more about it here

---

I usually use the ng set command to change the Angular CLI settings for project level.

ng set defaults.serve.port=4201

It changes change your .angular.cli.json and adds the port settings as it mentioned earlier.

After this change you can use simply ng serve and it going to use the prefered port without the need of specifying it every time.

---

you can also enter the below command in your angular cli where you normally enter npm start

ng serve --host "ip-address" --port "port-number"

---

To change port for once while running and no change in configuration you can use below command

ng serve --port 5000

If for every run of ng serve you need to have 5000 port. Do with below methods

Using angular.json

https://i.stack.imgur.com/jyYaR.png

In node_modules > @angular-devkit > build-angular > src > dev-server > schema.json, you will find below code and update port as you want like 5000. In package.json under "scripts" we've "start" update it with below command so on each run of "npm start" it will serve on 5000.

Note: Post all that restart server in terminal with 'ng serve' or 'npm start' Feedback helps to improve. Thanks!

---

It is not recommended to change in node modules as updates or re-installation may remove those changes. So better to change in angular cli

Angular 9 in angular.json

{
    "projects": {
            "targets": {
                "serve": {
                    "options": {
                         "port": 5000
                     }
                }     
            }     
    }
}  

---

you can also write this command: ng serve -p 5000

---

For angular 10+:

Navigate to angular.json file. Search for the "serve" field. Under "serve" it will be the "options" field (if not exist add the options field). Add this line to "options": "port": 4333(any port that you want).

Example:

        "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "port": 4333
      },
      "configurations": {
        "production": {
          "browserTarget": "dashboard:build:production"
        }
      }
    },

---

For Permanent: Goto nodel_modules/angular-cli/commands/server.js Search for var defaultPort = process.env.PORT || 4200; and change 4200 to anything else you want.

To Run Now: ng serve --port 4500 (You an change 4500 to any number you want to use as your port)

---

goto this file

node_modules\@angular-devkit\build-angular\src\dev-server\schema.json

and search port

"port": {
  "type": "number",
  "description": "Port to listen on.",
  "default": 4200
},

change default value whatever you want and restart the server

---

Simply set in package.json file

"scripts": {
    "ng": "ng",
    "start": "ng serve --port 3000",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },

then run the command

npm start

---

In angular.json:

"serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
          "browserTarget": "projectname:build",
          "port": 5000
         }

I am using angular-cli. This worked for me.

---

Go to angular.json file,

Search for keyword "serve":

Add port keyword as shown below:

 "serve": {
     "builder": "@angular-devkit/build-angular:dev-server",
     "options": {
         "browserTarget": "my-new-angular-app:build",
         "port": 3001
     },
     ...

---

ways to change the port number in an angular project:

node_modules \ @angular-devkit\build-angular\src\dev-server\schema.json in this path

    "port": {
             "type": "number",
             "description": "Port to listen on.",
             "default": <<port number>>     /* write your required port number here */
   } 

Running the project using

    ng serve --port <<port number>> --open

In angular.json file

   "server": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
          "browserTarget": "projectname:build",
          "port": 5000   /* add this part */
         }

adding this part and starting the server.

---

Although there are already numerous valid solutions in the above answers, here is a visual guide and specific solution for Angular 7 projects (possibly earlier versions as well, no guarantees though) using Visual Studio Code. Locate the schema.json in the directories as shown in the image tree and alter the integer under port --> default for a permanent change of port in the browser.

https://i.stack.imgur.com/oOtuY.jpg

---

If you have more than one enviroment, you may add the following way in the angular.json:

 "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "your_project:build"
      },
      "configurations": {
        "production": {
          "browserTarget": "your_project:build:production"
        },
        "es5": {
          "browserTarget": "your_project:build:es5"
        },
        "local": {
          "browserTarget": "your_project:build:local",
          "port": 4201
        },
        "uat": {
          "browserTarget": "your_project:build:uat"
        }
      }
    },

This way only the local points to another port.

---

We have two ways to change default port number in Angular.

First way to cli command:

ng serve --port 2400 --open

Second way is by configuration at the location: ProjectName\node_modules\@angular-devkit\build-angular\src\dev-server\schema.json.

Make changes in schema.json file.

{
 "title": "Dev Server Target",
  "description": "Dev Server target options for Build Facade.",
  "type": "object",
  "properties": {
    "browserTarget": {
      "type": "string",
      "description": "Target to serve."
    },
    "port": {
      "type": "number",
      "description": "Port to listen on.",
      "default": 2400
    },

---

If you want to use NodeJS environment variable to set up the value of the port of Angular CLI dev server, following approach is possible:

create NodeJS script, which will have an access to the environment variable (say, DEV_SERVER_PORT) and could run ng serve with --port parameter value taken from that variable (child_process might be our friend here):

const child_process = require('child_process');
const child = child_process.exec(`ng serve --port=${process.env.DEV_SERVER_PORT}`);
child.stdout.on('data', data => console.log(data.toString()));

update package.json to provide this script running via npm

do not forget to set up DEV_SERVER_PORT environment variable (can be done via dotenv)

Here is also the complete description of this approach: How to change Angular CLI Development Server Port via .env.

---