What is Base-Href in Angular

Recently I had a need to deploy Angular application to QA Server to demonstrate the progress we made to Stakeholders.

Like any other developer, I fired up ng build--prod on console and  few seconds later I had a compressed version of our app under the dist folder. I configured the demo app under our existing demo web application inside IIS {Instructions coming soon}. I thought is a simple way to configure since inside our organization demo web applications domain is used for such purpose. Now my angular app application endpoint was set up in the following manner - http://demo.product.com:4200/retail/

When I accessed the above URL I was getting HTTP 404. I start digging more and I found its happening because I configured angular app incorrectly.

Problem

Angular not able to figure out how to access certain navigation path because my app is not configured at root level , Base-href is root path of your app, all the resources and assets in your app are referenced based on this

This is not an angular specific feature , however angular Angular uses Base-href URL to tell the router how to navigate to URL

Solution

Simple as eating a piece of cake , while executing ng build append base-ref param

ng build --prod --base-href /retail*

*your app path , where you are supposed to deploy your angular application

You can verify base path after build by going to Dist->Index.html

You don’t need to set base-href if you are hosting your app at root level.

Though its pretty basic thing but if you mess this up all your subsequent request to app would fail if you don’t specify correct path .