How to Run Angular project on different port other than 4200

Sometimes you need to run two different Angular application in same system. So you need to run one application on different port than default port 4200. Or sometimes you may want to change default port for the Angular application.

There are two ways you can manage it by changin default port.

First way is when you run the Angular application, define which port you want to run the application.

ng serve --port 5500

This will run Angular application on port 5500. Or even if you don't define port in serve command, the Terminal will ask you to run the application on different port. If you enter Y and hit Enter, the Angular application will start on random port.

[email protected]:/var/www/html/marvin$ ng serve
? Port 4200 is already in use.
Would you like to use a different port? (Y/n) Yes
...
** Angular Live Development Server is listening on localhost:36591, open your browser on http://localhost:36591/ **

Second way is to change default port for any Angular application in configuration file.

There are also more than one option to change default port. One option is in the root file angular.json, add options.port in json file where port will define default port.

"projects": {
  "my-project-name": {
    ... extra configurations
    "architect": {
      "serve": {
        "options": {
          "port": 2200
        }
      }
    }
  }
}

This way, when you run server, it will always run on defined port instead of 4200.

The other option is to change in package.json file.

 "scripts": {
     // ...
  "ng": "ng",
  "start": "ng serve --port 2200",
     // ...
}

And run the npm command.

npm start

It will start Angular server. I hope it will help you.