iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
APP_BASE_HREF is Angular’s dependency-injection token for the URL prefix used by PathLocationStrategy. It helps Angular generate route URLs under an application’s mount point—for example, /foo becomes /my/app/foo when the app is hosted under /my/app/. For most applications, configure the prefix with a <base href> element in index.html; use an APP_BASE_HREF provider when you cannot change the document head. Neither setting replaces the server fallback needed for direct requests to nested routes.
What is APP_BASE_HREF in Angular?
APP_BASE_HREF is an InjectionToken<string> exported by @angular/common. Angular defines it as the base href used by PathLocationStrategy, which connects browser path URLs to Angular’s routing system. The token is marked stable in the Angular API reference.
Think of the base as the path where the application is mounted. If the app lives at the domain root, that path is usually /. If it is served from a subdirectory, such as /my/app/, Angular needs to account for that prefix when it creates route URLs.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
How do I set the Angular base href?
Preferred: set the base element in index.html
For a typical application, Angular recommends setting a <base href> element in the document head. For an app hosted at the root, the element is usually:
#1 Best Overall
<base href="/">For an app hosted in a subdirectory, set the href to that mount path, including its trailing slash, such as /my/app/. The browser uses the document base when resolving relative URLs, and Angular’s router uses it for path-based navigation. See Angular’s routing guide for the recommended document setup.
Alternative: provide APP_BASE_HREF
If you cannot edit the document head, provide the token in the application’s root injector. The Angular API reference shows this NgModule-style configuration:
import { APP_BASE_HREF } from '@angular/common';
@NgModule({
providers: [{ provide: APP_BASE_HREF, useValue: '/my/app/' }]
})
class AppModule {}Choose a value matching the app’s mount path. When using the provider instead of a document base element, Angular’s router guidance says to use root URLs for web resources such as CSS, scripts, images, and template resources. Otherwise, relative resource paths can resolve from an unexpected location.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsWhy should the base path end with a slash?
Use a trailing slash on a subpath base, for example /my/app/, rather than /my/app. The slash makes relative URI resolution behave as intended. Angular’s PathLocationStrategy reference illustrates that with a base of /my/app/, calling location.go('/foo') produces a browser URL like example.com/my/app/foo.
Rank #3
The document base is not a general-purpose prefix that is blindly attached to every URL. A root-relative URL with an authority, such as one beginning with a domain, bypasses the base. Query and fragment parts of a base href also have special behavior: PathLocationStrategy does not preserve them as part of generated route URLs, and a base fragment is not persisted. Refer to Angular’s routing guide for the browser URL resolution details.
APP_BASE_HREF vs. <base href> vs. –deploy-url
| Setting | What it controls | When to use it |
|---|---|---|
<base href> |
The document’s base URL for resolving relative URLs and the path base used by Angular routing. | Angular’s preferred setup for ordinary applications when you can edit index.html. |
APP_BASE_HREF |
The base href injected for PathLocationStrategy. |
Use as an alternative when the document head cannot be changed; configure resource URLs appropriately. |
--deploy-url |
A build-time asset URL prefix. | Use only when you need build-time asset path rewriting; Angular says it overlaps with base href for some assets and recommends preferring base href where possible. |
These settings address related but different needs. The document base and injection token concern the application’s URL prefix, while --deploy-url affects asset paths during the build. Angular explains the overlap and trade-off in its deployment guide.
Why do Angular deep links return 404 after deployment?
A correct base path helps Angular create route URLs, but it does not tell the web server how to handle incoming requests. If someone opens or refreshes a nested route directly, the browser requests that path from the server before Angular starts. The server must be configured to serve the app’s index.html for routed paths; without that fallback, the server may return a 404.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Keep the two jobs separate when troubleshooting: verify the base path if Angular creates the wrong client-side URL, and configure the host’s fallback behavior if direct navigation or refresh on a nested route fails. Angular’s deployment guide covers the fallback requirement and lists deployment options including Firebase Hosting, Vercel, Netlify, GitHub Pages, and Amazon Cloud S3.
What if the Angular app has localized builds?
For localized application outputs, the base path may differ by locale subdirectory. Angular’s localization deployment documentation describes using locale-specific baseHref overrides or subPath settings; the CLI adjusts the base href for localized outputs. Check the relevant locale configuration in the Angular localization deployment guide.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
