How to change angular port from 4200 to any other

Angular Cli

Angular Cli Problem Overview

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

Angular Cli Solutions

Solution 1 - Angular Cli

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.

Solution 2 - Angular Cli

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

Solution 3 - Angular Cli

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

Solution 4 - Angular Cli

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

Solution 5 - Angular Cli

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

Solution 6 - Angular Cli

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

Solution 7 - Angular Cli

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.

Solution 8 - Angular Cli

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"

Solution 9 - Angular Cli

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

  1. Using angular.json

Search "serve" under that add field "options" as below: enter image description here

  1. 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. enter image description here

  2. 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. enter image description here

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

Solution 10 - Angular Cli

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

Solution 11 - Angular Cli

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

Solution 12 - Angular Cli

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

Solution 13 - Angular Cli

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

Solution 14 - Angular Cli

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

Solution 15 - Angular Cli

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.

Solution 16 - Angular Cli

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

Solution 17 - Angular Cli

For angular 10+:

  1. Navigate to angular.json file.
  2. Search for the "serve" field.
  3. Under "serve" it will be the "options" field (if not exist add the options field).
  4. 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"
        }
      }
    },

Solution 18 - Angular Cli

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 */
   }
  1. Running the project using
    ng serve --port <<port number>> --open
  1. 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.

Solution 19 - Angular Cli

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.

enter image description here

Solution 20 - Angular Cli

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.

Solution 21 - Angular Cli

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

Solution 22 - Angular Cli

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.

Categories
Recommended Angular Cli Solutions

Previous Solution:

Function declaration syntax: things in parenthesis before function name

Go

Next Solution:

dyld: Library not loaded: /usr/local/opt/openssl/lib/libssl.1.0.0.dylib

MacosOpensslHomebrewVapor

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAshutosh JhaView Question on Stackoverflow
Solution 1 - Angular CliDavidView Answer on Stackoverflow
Solution 2 - Angular CliNathan FriendView Answer on Stackoverflow
Solution 3 - Angular Cliganesh kaljeView Answer on Stackoverflow
Solution 4 - Angular CliDhyeyView Answer on Stackoverflow
Solution 5 - Angular CliarsanyfView Answer on Stackoverflow
Solution 6 - Angular CliSajeetharanView Answer on Stackoverflow
Solution 7 - Angular ClicsikosjanosView Answer on Stackoverflow
Solution 8 - Angular CliAjitesh JaiswalView Answer on Stackoverflow
Solution 9 - Angular Clisid7747View Answer on Stackoverflow
Solution 10 - Angular CliShyamView Answer on Stackoverflow
Solution 11 - Angular CliSara VaseeiView Answer on Stackoverflow
Solution 12 - Angular CliDeepak swainView Answer on Stackoverflow
Solution 13 - Angular CliSohail AhmadView Answer on Stackoverflow
Solution 14 - Angular ClimanikandanView Answer on Stackoverflow
Solution 15 - Angular CliDeepak SinglaView Answer on Stackoverflow
Solution 16 - Angular CliPraveen M BView Answer on Stackoverflow
Solution 17 - Angular CliDor LeviView Answer on Stackoverflow
Solution 18 - Angular CliS J BHAVANAView Answer on Stackoverflow
Solution 19 - Angular ClithemightyhulkView Answer on Stackoverflow
Solution 20 - Angular CliKlaus KleinView Answer on Stackoverflow
Solution 21 - Angular CliSatyendra PatelView Answer on Stackoverflow
Solution 22 - Angular ClidhiltView Answer on Stackoverflow