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
On this page of the site you can watch the video online Angular base href with a duration of hours minute second in good quality, which was uploaded by the user kudvenkat 18 December 2017, share the link with friends and acquaintances, this video has already been watched 86,964 times on youtube and it was liked by 469 viewers. Enjoy your viewing!
