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        quot port quot   5000    But my app still runs on 4200 instead of 5000

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Run below command for other than 4200   ng serve --port 4500

User · Answer

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

User · Answer

This will automatically open your window as well  ng serve -o --port 4801

User · Answer

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

User · Answer

For angular 10    Navigate to angular json file  Search for the  quot serve quot  field  Under  quot serve quot  it will the  quot options quot  field  Add this line to  quot options quot    quot port quot   4202 any port that you want    Example           quot serve quot            quot builder quot    quot  angular-devkit build-angular dev-server quot          quot options quot              quot browserTarget quot    quot dashboard build quot              quot port quot   4202                   quot configurations quot              quot production quot                quot browserTarget quot    quot dashboard build production quot

User · Answer

you can also write this command  ng serve -p 5000

User · Answer

If you have more than one enviroment  you may add the following way in the angular json    quot serve quot            quot builder quot    quot  angular-devkit build-angular dev-server quot          quot options quot              quot browserTarget quot    quot your project build quot                  quot configurations quot              quot production quot                quot browserTarget quot    quot your project build production quot                      quot es5 quot                quot browserTarget quot    quot your project build es5 quot                      quot local quot                quot browserTarget quot    quot your project build local quot              quot port quot   4201                     quot uat quot                quot browserTarget quot    quot your project build uat quot                            This way only the local points to another port

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

simply run        ng serve --port 5000 --open

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

The code worked for me was as follows  ng serve --port ABCD   For Example  ng serve --port 6300

User · Answer

Just Run   ng serve --port yourport  Example      ng serve --port 4401

User · Answer

ways to change the port number in an angular project   node modules    angular-devkit build-angular src dev-server schema json in this path       quot port quot                   quot type quot    quot number quot                 quot description quot    quot Port to listen on  quot                 quot default quot    lt  lt port number gt  gt         write your required port number here            Running the project using      ng serve --port  lt  lt port number gt  gt  --open   In angular json file      quot server quot                quot builder quot    quot  angular-devkit build-angular dev-server quot              quot options quot                quot browserTarget quot    quot projectname build quot              quot port quot   5000      add this part                adding this part and starting the server

User · Answer

You can try  ng serve --host 0 0 0 0 --port 4001  Then launch browser with  http   localhost 4001

User · Answer

in angular 2     To change port you can run below command in terminal    ng serve --host 0 0 0 0 --port 5000

User · Answer

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

User · Answer

This worked for all users  ng s -o --port 4450  serve  s  Builds and serves your app  rebuilding on file changes

User · Answer

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

User · Answer

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

User · Answer

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

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

If using Angular CLI 1

If using the latest Angular CLI

Without changing any file

Examples related to angular-cli

Examples related to port-number