July 25, 2022

How to change angular port from 4200 to other

You might be using ng serve command to build and run the Angular project. By default it is using the port 4200. After successfull build you can access the application in the browser by visiting the link

	http://localhost:4200/

If you need to work on more than one application simultaneously, then the second application will not work, because the port will already be in use by the first application. Or there may the scenario where you just want to run the application on the port other than the default one.

Following are the ways you can use different port when building the angular application.

  1. You can specify the port each time when running ng serve command from the terminal using --port argument. Like this:

    	ng serve --port 4201
    
  2. For legacy applications, where you have angular-cli.json file. In this file you can specify the port in the defaults:

    	"defaults": {
    	  "serve": {
    		"port": 4201
    	  }
    	}
    
  3. For newer applications (@angular/cli@9.x and over), you can use angular.json file to specify a port per project

    	"projects": {
    		"myproject1": {
    			... (rest of project config settings)
    			"architect": {
    				"serve": {
    					"options": {
    						"port": 4201
    					}
    				}
    			}
    		}
    	}
    

No comments:

Post a Comment