Introduction
Angular, a well-liked platform for constructing internet purposes, by default runs its native improvement server on port 4200. Nonetheless, there could also be situations the place it’s good to modify this default port. This may very well be on account of conflicts with different processes, firm insurance policies, or just private choice. This tutorial will information you thru the steps to switch the default port in Angular.
Utilizing the –port Flag
The best strategy to change the default Angular port is by utilizing the --port flag whereas beginning the Angular server. This flag means that you can 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.
Observe: It is a short-term change and the port will revert again to 4200 the subsequent time you begin the server with out the --port flag.
Setting Default Port in angular.json
In order for you a everlasting change within the default port, you may modify the angular.json file in your mission’s root listing. This file comprises configurations on your Angular mission.
To vary 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.
For example, in the event 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
Typically while you attempt to run your Angular utility on a selected port, you could 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 mechanically choosing an arbitrary port when the default port is in use.
To permit Angular to pick an arbitrary port, you should use the --port 0 possibility:
$ ng serve --port 0
If you run this command, Angular will discover an open port and serve your utility on it. You will note an output much like the next:
** Angular Reside Growth 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 utility.
Learn how to Terminate Processes Operating on Port 4200
There could be conditions the place it’s good to terminate the method operating on port 4200. This may very well be on account of a lot of causes akin to a hung course of, or needing to release the port for an additional utility.
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 methods like Linux and macOS, you should use 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
It will 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 use the netstat command to seek out the PID after which use the taskkill command to terminate it:
> netstat -ano | findstr :4200
It will 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 lined tips on how to deal with port conflicts in Angular by permitting Angular to pick an arbitrary port. We have additionally realized tips on how to terminate processes operating on a selected port.
