Angular 6+ How to change default port 4200

Question

This question is specific to version 6 of Angular, not earlier, since .angular-cli.json file had been replaced by angular.json file.

I created a new Angular 6 project and tried, as I always did with previous versions, to change its default port but this time in angular.json.

  "defaults": {
    "serve": {
      "port": 4220
  },

But get the following error:

Invalid schema detected in .angular-cli.json, please correct and try again!

Does any one know how to do this with this new version of Angular ?

Possible duplicate of [angular-cli server - how to specify default port](https://stackoverflow.com/questions/37154813/angular-cli-server-how-to-specify-default-port) — Orlandster, May 24 '18 at 22:39
@Orlandster the mentioned question has been emitted on May 11 '16, it was talking about angular-cli, version 6 of Angular was issued on May '18, it's confusing to find such answer there. — Sami-L, May 25 '18 at 00:05

Sami-L · Accepted Answer · 2020-05-16T14:22:59.193

101

Due to a non accurate title: "angular-cli server - how to specify default port", it was hard to find an answer to my question, but thanks to Vladymir Gonzalez I did.

To help others find the answer quickly, I extracted here the specific part for Angular 6, belonging to elwyn :

Update for @angular/cli@6.x: In the new angular.json you now specify a port per "project"

"projects": {
    "my-cool-project": {
        ... rest of project config omitted
        "architect": {
            "serve": {
                "options": {
                    "port": 4850    <-- add your custom port number here      
                }
            }
        }
    }
}

All options available:

https://github.com/angular/angular-cli/wiki/angular-workspace

edited May 16 '20 at 14:22

answered May 24 '18 at 23:29

Sami-L

5,241
18
55
82

6

This can be set using the cli config command: `ng config projects.[YOURPROJECTNAME].architect.serve.options.port 1337` – Rob Jul 02 '18 at 18:17
1

This is the best answer. Thanks! – Rejwanul Reja Feb 04 '20 at 03:27

score 17 · Answer 2 · answered May 24 '18 at 23:35

17

You can always specify the port while serving also: ng serve --port 3000

You can put any valid port number there and it will serve from that port.

answered May 24 '18 at 23:35

Nicholas Pesa

2,076
2
24
43

1

I prefer to avoid this by saving the port in angular.json file, this way I can use only "ng serve -o" without trying to remember each time the port number for each app. – Sami-L May 24 '18 at 23:44
Makes sense, I usually have multiple projects serving with different storage/auth data so I tend to just specify when serving – Nicholas Pesa May 24 '18 at 23:45

Deva · Answer 3 · 2019-08-21T09:33:49.390

11

I am giving answer for angular 2+ application.

If you wanted to start 2 angular application in different port i.e.

1) port 4200 
2) port 5000

you need to change "package.json" file and just change add one line "Script block" in first curly braces where your application name, version is default available,

"scripts": {
    "ng": "ng",
    "start": "ng serve --port 5000 ",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },

Start your application by "npm start" command. This command will start your application on Port 5000.

edited Aug 21 '19 at 09:33

answered Aug 10 '18 at 11:13

Deva

1,587
19
20

1

The best answer for long-term use so I would not have to use "ng serve --port 4300" (or another number) every time. Thanks! – Dacomis Sep 04 '19 at 18:40

score 4 · Answer 4 · answered Apr 10 '19 at 05:00

The answer is simple write ng serve --open --port=YourPortNumber in command prompt.

Example :

ng serve --open --port=4201

==== OTHER SOLUTION ====

You can also change it in package.json

"scripts": {
  "start": "ng serve --open --port=4201",
}

Now, in command propmt just write npm start

score 1 · Answer 5 · answered Dec 11 '18 at 06:52

Two way to change your default port First: using command

ng serve --port 8000 || ng serve --host '192.168.1.1' --port 8000

Second: edit your package.json

"scripts": {
    "ng": "ng",
    "start": "ng serve --port 8000",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },

If you are using multiple project in some time in your system that condition first one is best and i thing first is good for practice

score 1 · Answer 6 · answered Dec 31 '19 at 09:41

1

To run angular on a specified port use command sudo ng serve --port 8080 in place of 8080 you can specify any port number.

This will only run the project on the port number unless you close it.

answered Dec 31 '19 at 09:41

Satyam Anand

339
3
9

Angular 6+ How to change default port 4200

6 Answers6