Serving an Angular App on Different Port

If you are looking to serve your Angular app on a different port, you might be wondering how to do this. Luckily, it’s a pretty straightforward process that just requires a few steps.

Step 1: Configure the Angular CLI

The first step is to configure the Angular CLI to serve your app on a different port. You can do this by running the following command:

ng serve --port 4200

In this example, we are serving the app on port 4200, but you can replace this with any port number that is available on your system.

Step 2: Update the Base Href

Once you have configured the CLI to serve the app on a different port, you will need to update the base href in your index.html file. This is necessary so that the app knows where to find its assets.

<base href="/my-app/">

Replace “/my-app/” with the appropriate base href for your app.

Step 3: Access the App on the New Port

With these changes in place, you should now be able to access your Angular app on the new port. Simply open your browser and navigate to http://localhost:4200, replacing 4200 with the port number you chose in step 1.

Conclusion

By following these steps, you can easily serve your Angular app on a different port. This can be useful for a variety of reasons, such as running multiple instances of the app on the same machine or integrating with other applications that are already using specific ports.