Angular base href

In this tutorial we will discuss the significance of the base href element in Angular.

When setting up routing in an angular application, the first step is to set the base path using the base href element. The base path tells the angular router, how to compose the navigation URLs. The browser uses the base href value to prefix relative URLs when referencing CSS files, scripts, and images.

During development we usually set this to a single forward slash

This means all the URLs will be relative to the root of the application. So when we navaigate to “/list”, the path “/list” will be appended to root UR and the complete URL will be as shown below. Notice “/list” is relative to the root URL.

Along the same lines, when we navigate to “/create”, the complete URL is

When we deploy our application to a server, we typically deploy it to a sub folder on the server. For example, if we are deploying our application in a sub-folder called “emp”, then we set the base href element to /emp/ as

This means all the URLs now will be relative to the “emp” base path and will be as shown below.

During development we usually set base href element to a single forward slash. At this point, if we execute the following command, all the URLs will be relative to the root URL ”
ng serve -o

Also, on the “sources” tab in the browser developer tools, you will find all the Script, Images and Template files are relative to the root URL ”

During development, if you want a different base path other than “/”, simply execute the “ng serve” command with –base-href option set to your desired base path
ng serve -o –base-href /emp/

At this point all the URLs will be relative to ” as we have set the –base-href to /emp/. You can confirm this by looking at the URLs in the address bar and the “Sources” tab in the browser developer tools.

On your local development machine, if you set the base href element in index.html to “/emp/” instead of a single “/” and if you run ng serve -o command without the “base-href” option you will not see anything on the browser. When you open the browser developer tools, you will see the JavaScript bundle files failed to load. To fix this execute ng serve command along with the base href option as shown below.
ng serve -o –base-href /emp/

On your local development machine, if you set the base href element in index.html to a single forward slash and if you want to deploy your application on a server on sub-folder called “emp”, then you will have to remember to update the base href element value in index.html to “/emp/”. There are 2 ways we can do this.
1. Manually update the index.html file
OR
2. Use the –base-href option along with the ng build command as shown below. This will update the “base href” element value index.html.
ng build –base-href /emp/

Text version of the video

Slides

Angular CRUD Tutorial

All Dot Net and SQL Server Tutorials in English

All Dot Net and SQL Server Tutorials in Arabic