[angular-cli] How to change angular port from 4200 to any other

I want to use 5000 instead of 4200.

I have tried to create a file on root name ember-cli and put JSON according to the code below:

{
   "port": 5000
}

But my app still runs on 4200 instead of 5000

This worked for all users:

ng s -o --port 4450

serve:

s

Builds and serves your app, rebuilding on file changes.

in angular 2++.

To change port you can run below command in terminal :

ng serve --host 0.0.0.0 --port 5000.

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.

ways to change the port number in an angular project:

1. 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 */
   } 

2. Running the project using

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

3. 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.

You can try:

ng serve --host 0.0.0.0 --port 4001

Then launch browser with: http://localhost:4001/

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

You can change your application port by using below command:-

ng serve --port 4400

Note:-In my case desired port number is 4400.It can be anything of your choice.

To see the changes:-

Just launch browser with: http://localhost:4400/

For angular 10+:

1. Navigate to angular.json file.
2. Search for the "serve" field.
3. Under "serve" it will the "options" field.
4. Add this line to "options": "port": 4202(any port that you want).

Example:

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

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.

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.

Just Run

ng serve --port yourport

Example:

ng serve --port 4401

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
    }
  }

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.

simply run ng serve --port 5000 --open

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
    },

• 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)

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

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.

This will automatically open your window as well

ng serve -o --port 4801

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.)

Run below command for other than 4200

ng serve --port 4500

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

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

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"

The code worked for me was as follows

ng serve --port ABCD

For Example

ng serve --port 6300

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

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
     },
     ...

To run and open in the browser automatically use the flag -open or just -o

ng serve -o --port 4200

Note: The port 4200 is arbitrary. It can be any port of your choice

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
                     }
                }     
            }     
    }
}