How to change angular port from 4200 to any other

Question

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:

{
   &q         


        

Answer 1

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

Answer 2

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/

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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.