Introduction
Angular, a well-liked platform for constructing internet functions, by default runs its native improvement server on port 4200. Nonetheless, there could also be situations the place you must modify this default port. This could possibly be attributable to conflicts with different processes, firm insurance policies, or just private desire. This tutorial will information you thru the steps to change the default port in Angular.
Utilizing the –port Flag
The only option to change the default Angular port is by utilizing the --port flag whereas beginning the Angular server. This flag lets you specify the port quantity on which the server ought to run. Here is an instance:
$ ng serve --port 4500
On this case, the Angular server will begin on port 4500 as an alternative of the default port 4200.
Notice: This can be a short-term change and the port will revert again to 4200 the following time you begin the server with out the --port flag.
Setting Default Port in angular.json
If you need a everlasting change within the default port, you may modify the angular.json file in your challenge’s root listing. This file incorporates configurations in your Angular challenge.
To alter the default port, find the serve object inside the architect object. Add a port possibility inside the choices object and set it to your required port. Here is an instance:
"architect": {
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"choices": {
"browserTarget": "your-project-name:construct",
"port": 4500
},
With this transformation, each time you run ng serve, the server will begin on port 4500.
Altering the Port with out Modifying angular.json
If you wish to change the default port with out modifying the angular.json file, you may create a script in your shell. This script will execute the ng serve command with the --port flag.
As an illustration, when you’re utilizing a Unix-like working system, you may add the next line to your .bashrc or .zshrc file:
alias ngserve="ng serve --port 4500"
Now, each time you execute the ngserve command, the Angular server will begin on port 4500.
Dealing with Port Conflicts
Generally whenever you attempt to run your Angular software on a selected port, chances are you’ll encounter a port battle. This occurs when the port is already in use by one other course of. Angular offers an answer for this by robotically deciding on an arbitrary port when the default port is in use.
To permit Angular to pick an arbitrary port, you should utilize the --port 0 possibility:
$ ng serve --port 0
Whenever you run this command, Angular will discover an open port and serve your software on it. You will notice an output just like the next:
** Angular Stay Improvement Server is listening on localhost:49152, open your browser on http://localhost:49152/ **
On this case, Angular has chosen port 49152. You’ll be able to then open your browser and navigate to http://localhost:49152/ to check your software.
The best way to Terminate Processes Working on Port 4200
There may be conditions the place you must terminate the method working on port 4200. This could possibly be attributable to quite a few causes resembling a hung course of, or needing to unlock the port for one more software.
Hyperlink: For a extra in-depth rationalization of this course of, see the next: Discover which Course of is Listening to a Port.
On Unix-based programs like Linux and macOS, you should utilize the lsof command to seek out the method ID (PID) that’s utilizing port 4200 after which use the kill command to terminate it. Right here is how you are able to do it:
$ lsof -i :4200
This may output one thing like:
COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAME
node 12345 person 23u IPv6 1234567 0t0 TCP *:4200 (LISTEN)
On this instance, the PID is 12345. You’ll be able to then use the kill command to terminate this course of:
$ kill -9 12345
On Home windows, you should utilize the netstat command to seek out the PID after which use the taskkill command to terminate it:
> netstat -ano | findstr :4200
This may output one thing like:
TCP 0.0.0.0:4200 0.0.0.0:0 LISTENING 12345
On this instance, the PID is 12345. You’ll be able to then use the taskkill command to terminate this course of:
> taskkill /PID 12345 /F
Right here, the /F possibility is used to forcefully terminate the method.
Conclusion
On this Byte, we have coated the right way to deal with port conflicts in Angular by permitting Angular to pick an arbitrary port. We have additionally realized the right way to terminate processes working on a selected port.
