How to change angular port from 4200 to any other

问题:

I want to use 5000 instead of 4200 ..

What i have tried is i have created a file on root name ember-cli and put JSON according to the code below:

{
   "port": 5000
}

But my app still run on 4200 instead of 5000

回答1:

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.

回答2:

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

回答3:

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

回答4:

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

回答5:

This 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 Anfular 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

回答6:

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.

回答7:

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

回答8:

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

回答9:

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"

回答10:

You can edit default port number that is configured in serve.js file.

Path will be project_direcory/node_modules/angular-cli/commands/serve.js.

Search for this line -> var defaultPort = process.env.PORT || 4200;
Replace with this line -> var defaultPort = process.env.PORT || 5000;

回答11:

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

回答12:

Run below command for other than 4200

ng serve --port 4500

回答13:

simply run ng serve --port 5000 --open

回答14:

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.

回答15:

in angular 2++.

To change port you can run below command in terminal :

ng serve --host 0.0.0.0 --port 5000.

回答16:

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

回答17:

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.