Скачать или смотреть Angular base href

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

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.
   / @aarvikitchen5572  

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.
http://localhost:4200/list

Along the same lines, when we navigate to "/create", the complete URL is http://localhost:4200/create

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.
http://serverName/emp/list
http://serverName/emp/create

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 "http://localhost:4200"
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 "http://localhost:4200"

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 "http://localhost:4200/emp" 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
http://csharp-video-tutorials.blogspo...

Slides
http://csharp-video-tutorials.blogspo...

Angular CRUD Tutorial
   • What is Angular CLI  

Angular CRUD Tutorial Text Articles & Slides
http://csharp-video-tutorials.blogspo...

All Dot Net and SQL Server Tutorials in English
https://www.youtube.com/user/kudvenka...

All Dot Net and SQL Server Tutorials in Arabic
   / kudvenkatarabic