LOCATION_UPGRADE_CONFIGURATION configures how Angular’s location system behaves in an application running AngularJS and Angular together. Its LocationUpgradeConfig options let you choose path or hash URLs, set the hash prefix, choose URL encoding behavior, and specify the base href for server-rendered or client-rendered applications.
What does LOCATION_UPGRADE_CONFIGURATION configure?
LOCATION_UPGRADE_CONFIGURATION is an Angular injection token for a LocationUpgradeConfig value in @angular/common/upgrade. It configures the location upgrade module used when AngularJS and Angular coexist during a migration. The interface provides five options:
As an Amazon Associate I earn from qualifying purchases.
| Option | What it controls |
|---|---|
useHash |
Selects hash-based or path-based location handling. |
hashPrefix |
Sets the prefix used with hash-based URLs. |
urlCodec |
Selects URL encoding and decoding behavior. The API reference identifies AngularJSCodec as the default. |
serverBaseHref |
Configures the base href in a server-side rendered application. |
appBaseHref |
Configures the base href in a client-side rendered application. |
The API reference describes the roles of the two base-href options but does not specify their default values. Check the documentation for the Angular version used by your application rather than assuming a default.
How do you choose hash or path URLs?
The setting useHash determines which location strategy the upgraded application uses. The choice affects the URLs users see and what your web server must do when a route is opened directly.
#1 Best Overall
| Strategy | Example URL | Deployment consideration |
|---|---|---|
Path (PathLocationStrategy) |
http://example.com/foo |
The server must serve the application for route paths such as /foo, including on direct visits or refreshes. |
Hash (HashLocationStrategy) |
http://example.com/#/foo |
The route stays in the URL fragment, so the server receives the part before the hash rather than the client route. |
Path URLs are a natural fit when the host is configured to fall back to the application for routes. Hash URLs can avoid requiring server rewrites for client-side routes, but change the public URL format. Before choosing, check the deployment’s fallback behavior and whether existing links or bookmarks rely on the current format. Angular’s router documentation also cautions that URL choices affect production references: Location strategy and browser URL styles.
In the documented Angular v17 upgrade guide, useHash defaults to false and hashPrefix defaults to an empty string. Those are version-specific documented defaults; verify the target release before relying on them. The same guide shows an override with useHash: true and hashPrefix: '!'.
How do you configure it in a hybrid application?
The Angular v17 upgrade guide demonstrates importing LocationUpgradeModule from @angular/common/upgrade and adding its configured module to the Angular application’s AppModule imports:
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
import { LocationUpgradeModule } from '@angular/common/upgrade';
@NgModule({
imports: [
LocationUpgradeModule.config({
useHash: true,
hashPrefix: '!'
})
]
})
export class AppModule {}Use the values appropriate to the application’s URL scheme; the snippet illustrates the guide’s hash-style override, not a universal recommendation. Check the target Angular version’s upgrade documentation for the supported integration pattern.
Rank #3
The module provides a unified location service, moving navigation and routing-message responsibilities from AngularJS $location to Angular’s Location service. Its upgrade behavior also accounts for digest cycles triggered by navigation. For AngularJS code that still expects $location, the upgrade guide demonstrates registering a downgraded $locationShim, which the API describes as a drop-in replacement for AngularJS $location. See Using the Angular Location service in AngularJS.
When should you use setUpLocationSync?
setUpLocationSync is a related helper for synchronizing location behavior in an upgrade architecture. It accepts an UpgradeModule and an optional URL type, 'path' or 'hash'. Angular documents that it must run after UpgradeModule.bootstrap. It installs a location-change listener that triggers history.pushState and addresses the fact that onPopState does not trigger history.pushState.
Follow the documented order if your migration needs this synchronization: bootstrap the upgrade module first, then call setUpLocationSync. The API reference is at setUpLocationSync.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →How do base href and URL handling fit in?
Use serverBaseHref for the base href in a server-side rendered application and appBaseHref for a client-side rendered application. They represent different rendering contexts; do not treat them as interchangeable. Angular’s API reference documents these roles alongside the other configuration options: LocationUpgradeConfig.
The urlCodec option controls URL encoding and decoding, with AngularJSCodec named as its default in the API reference. This is relevant when URL interpretation must remain compatible across the two frameworks; avoid changing it without checking how the application and its existing routes encode URLs.
How should you use Angular’s Location service for navigation?
For ordinary route changes, Angular recommends using Router.navigate(). Use the Location service when you need to interact with or construct normalized URLs outside router navigation. The service normalizes URLs against the application base href, and prepareExternalUrl applies behavior based on the selected location strategy. See the Location API.
Quick Recap
What to check before changing the configuration
- Confirm which Angular release the hybrid application uses; the cited defaults and integration example are from the Angular v17 upgrade guide.
- Test direct visits and refreshes on nested routes against the actual server or hosting configuration before selecting path URLs.
- Check whether public links, bookmarks, or integrations depend on the current URL format before switching strategies.
- Determine whether the application is server-side or client-side rendered before setting a base-href option.
- Keep the AngularJS location shim and synchronization behavior aligned with the migration architecture, including the required bootstrap order for
setUpLocationSync.
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.
