I'm working on an Angular app where I'm faced with setting an HTML base href value, and/or an APP_BASE_HREF value.

What is the difference and relation between these?

I'm working on an Angular app where I'm faced with setting an HTML base href value, and/or an APP_BASE_HREF value.

What is the difference and relation between these?

• javascript
• html
• angular
• angular-router

• Not really no. I'm looking for a clear difference between these two things. – michaeljsalo Commented Sep 7, 2021 at 21:13
• could you accept my answer if it answers your question? – ahong Commented Mar 16, 2023 at 20:57

2 Answers 2

In general, you should only have to set the <base href>.

Exceptions are if you do not have access to the index.html or you want the HTML5 style URLs to be different from where you are serving the Angular files (then you need to provide the APP_BASE_HREF).

What is the difference and relation between these?

The <base href> is used as the default base URL (see source code) when generating HTML5 style URLs for your web app. Additionally, it "specifies a base path for resolving relative URLs to assets such as images, scripts, and style sheets," namely your Angular distribution. Since <base href> is just a HTML element, you can see the Mozilla docs for details and see the munity wiki for implications.

If for some reason you fall into the above two exceptions, you can provide the APP_BASE_HREF instead, which is solely used for routing purposes (using the PathLocationStrategy) and does not set or interact with the <base href>.

Summary

1. <base href> is used as the base URL for routing when APP_BASE_HREF is NOT set.
2. Setting a bination of <base href> and APP_BASE_HREF can be used for deployment scenarios in which the displayed URL and actual location where files are being served are different.
3. In the case you don't have access to the index.html, the APP_BASE_HREF must be set if using the PathLocationStrategy.

Further reading

• https://angular.io/guide/router#base-href-1
• https://angular.io/guide/deployment#the-base-tag
• https://angular.io/api/mon/APP_BASE_HREF
• https://angular.io/api/mon/PathLocationStrategy#description

@ahong's answer is spot on however I would like to explain the difference with an example:

Consider you have an app with a route /page1 hosted on mysite.

without setting any of these your site shows the page at route mysite./page1.

APP_BASE_HREF

If you want to have some prefix to the page route, then you set that in APP_BASE_HREF. Then your app will route your page as mysite./your-app-base-href-value/page1

--base-href or -br

this is where your app will load the assets from. When it needs to download a chuck xyz.js then it will fetch it from your server mysite./your-base-href-value/xyz.js note this is not related to the frontend routing that you see for page1, but for the assets and is useful if you deploy your dist in a subfolder on your web server