APP_BASE_HREF tells Angular’s PathLocationStrategy which URL prefix to use when it builds and recognizes application routes. For most apps, configure the document’s <base href> in index.html; provide APP_BASE_HREF when you cannot change that element. Neither option configures your web server to serve Angular for direct requests to nested routes.
What is APP_BASE_HREF in Angular?
APP_BASE_HREF is a dependency-injection token exported by @angular/common. Angular describes it as a predefined token for the base href used with PathLocationStrategy. The API is marked stable. It is application URL configuration—not a server setting. Angular API: APP_BASE_HREF.
As an Amazon Associate I earn from qualifying purchases.
For example, if the application is mounted at /my/app/, a route such as /foo can appear in the browser as /my/app/foo. The prefix must match the app’s mount point. Include the trailing slash so relative URIs resolve as intended. Angular API: PathLocationStrategy.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Should you use APP_BASE_HREF or <base href>?
Angular’s router guide recommends a <base href> element in the document head for ordinary pushState routing. Use a provider value as an alternative if you cannot edit the document’s head. Angular guide: Common router tasks.
#1 Best Overall
- You can edit
index.html: Set the document’s<base href>to the app’s base path. - You cannot edit the base element: Provide
APP_BASE_HREFwith the appropriate prefix. Angular’s guide advises using root URLs for CSS, scripts, images, and other web resources in this setup. - The app is hosted below the domain root: Match the base path to the deployment mount point and include a trailing slash.
A base URL also affects browser resolution of relative URLs, not just Angular routes. A root URL with an authority bypasses the base URL; query and fragment behavior has additional rules. In particular, PathLocationStrategy does not preserve query or fragment parts of the base href as route prefixes. Angular router guide; PathLocationStrategy API.
How to provide APP_BASE_HREF
In an NgModule-based application, register the token in the root injector using the app’s actual mount path:
import {APP_BASE_HREF} from '@angular/common';
@NgModule({
providers: [{provide: APP_BASE_HREF, useValue: '/my/app/'}]
})
class AppModule {}The API reference shows this provider pattern. Set the value for the deployed path; for a root-hosted app, the base path is /. Angular API: APP_BASE_HREF.
Why does a deployed Angular deep link return 404?
Base URL configuration and server routing address different stages. The base helps Angular construct and recognize client-side URLs. When someone opens or refreshes a nested route directly, the browser first requests that path from the server, before Angular runs. Configure the server to return the app’s index.html for routed paths; without that fallback, the server may respond with 404. Angular deployment guide: Routed apps must fallback to index.html.
Rank #3
When should you use –deploy-url?
--deploy-url is a build-time setting for asset URL resolution. It overlaps with <base href> for some assets, so Angular advises preferring the base href where possible. Use a deploy URL only when you need its separate asset-path behavior; it is not a substitute for the server fallback required by deep links. Angular deployment guide: The deploy URL.
What changes for localized Angular builds?
For builds that output localized applications, check the locale’s baseHref and subPath configuration. Angular’s localization guide explains that the CLI adjusts the base href for localized outputs. Angular guide: Deploy multiple locales.
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.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problems
