How to Change Angular CLI ng serve Default Host and Port
Do you want to set custom host and port to override ng serve default configurations? Let’s do it!
ng serve is quite a powerful and handy tool to use when working with Angular 2+. It will build and serve your Angular project via a development server, rebuilding on file changes, and reloading the connected pages.
Angular CLI will auto-generate all the necessary configuration to build and run your project when it is created. Working with the out-of-the-box configuration is just fine in many cases. In some other situations, such as developing and running multiple concurrent Angular projects on the same machine can become a bit of a hassle.
One might say:
Just stop one application and start the other!
Yes. That certainly works. But, what if you like or need them all running at the same time?
Only one application can maintain a given port open at a time. Therefore, our good ol’ localhost:4200 needs to be changed if you desire to run them all simultaneously.
Not a problem! Angular CLI got your back. ng serve provides us with a long list of options to override its default configuration. To learn more about these options, check out ng serve’s documentation page.
Command-Line Options
ng serve has built-in option flags to update host and port:
--port: port to listen on; defaults to4200--host: host to listen on; defaults tolocalhost
Just like that, our application is served on example.com:5003. The command above is flexible and easy enough to be added to one of your scripts.
Angular CLI Config File Defaults
Do you want to go one step further? We may set these custom preferences straight into our Angular CLI config file and then simply run ng serve.
Angular CLI 6+
On Angular version 6, the Angular CLI file changed and so did how to set up the defaults for ng serve. Below is a sample of theangular.json file and where the host and port should be updated.
Angular CLI <6
Granted that not everybody is running Angular 6 and up, this is how the host and port are set in the angular-cli.json file.
Summary
Theng serve development server and its live-reload function make it easy for you to see changes in your web app as you make them. All it takes to run multiple projects simultaneously is some tweak in the configuration. The configuration can be easily changed by either the command-line options or by updating the Angular config file.
I hope this article was helpful to you.
