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 community 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 combination 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/common/APP_BASE_HREF
• https://angular.io/api/common/PathLocationStrategy#description