asp.net core docker 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.
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
https://www.youtube.com/watch?v=rJ9o4...

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
https://www.youtube.com/c/KudvenkatAr...

asp.net core docker Angular base href
235 Likes	235 Dislikes
46,507 views views	524K followers
Science & Technology	Upload TimePublished on 18 Dec 2017

Related keywords

tutorialspoint,ajax meaning,tutorials dojo,central park 5,asp.net core github,craigslist nj,asp.net core 3,server status,ajax fc,ajax players,server jobs nyc,asp.net core swagger,credit karma,services group,tutorials by hugo,mvc design pattern,server error in '/' application,servers for minecraft,asp.net core dependency injection,services windows,asp.net core 3.0,tutorialspoint c#,services angular,calculator,tutorialspoint tableau,ajax ontario,services google play apk,asp.net core 3 release date,server job description,tutorials by a,servicenow,mvc hours,tutorialspoint python,services briefcase,asp.net core web api,ajax jquery,craigslist ny,ajax call,server pro,server status ffxiv,cheap flights,server memes,asp.net core hosting,services sas,services online,chase,tutorialspoint java,serverless architecture,tutorialspoint java compiler,server resume,server books,tutorialspoint javascript,mvcc connect,services technologies gps,ajax deadpool,college football,server jobs,cvs,cnn,mvc tutorial,costco hours,tutorialspoint sql,server side rendering,tutorialspoint spring,serverless,mvc nj,tutorialspoint spark,asp.net core download,cool math games,services & training hse colombia sas,servicestack,citibank,asp.net core identity,ajax parking,asp.net core logging,tutorialsystems,mvconnect,ajax post,cunyfirst,services fms publish announcement,services.msc no abre,ajax jersey,asp.net core razor pages,server duties,asp.net core environment variables,tutorials near me,server 2019,chernobyl,century 21,serverminer,ajax cleaner,services consultores,services consulting,mvcsd,mvcsc,services.msc,asp.net core configuration,ajax marvel,mvc medical,asp.net core tutorial,ajax roster,mvc architecture,mvc2,asp.net core mvc,ajax soccer,server hosting,chase online,costco,server jobs near me,ajax dish soap,capital one,server rack,tutorialspoint html,ajax tavern,craigslist,tutorialsteacher,ajax javascript,tutorialspoint reactjs,ajax request,asp.net core 2.2,services desk,tutorialspoint python 3,services transmission company sas,asp.net core signalr,services manager,mvc framework,ajax paving,mvc near me,ajax greek,mvc pattern,mvcu,tutorialspoint spring boot,asp.net core middleware,mvc map,services tag dell,mvc webadvisor,mvcc,mvci,mvctc,