What Is APP_BASE_HREF in Angular 4/5?

The APP_BASE_HREF token represents the base “href” to be used with the PathLocationStrategy.
The APP_BASE_HREF token is available when using JIT runtime and APP_BASE_HREF token represents the base “href” and it’s used with the PathLocationStrategy.

If you are using the PathLocationStrategy that means you must provide a provider to a string representing the URL prefix.

The URLs prefixes are strictly local in Angular Apps and router navigates to the new component and renders its template and also updates the history and URL for the view. These all happens in the browser locally.

Angular supports two Location Strategies and its looks like -
ü  When you are using HashLocationStrategy that means the URL looks like-“http://localhost:9099/#/user
ü  When you are using PathLocationStrategy that means the URL looks like-“http://localhost:9099/user”

Example – Using the APP_BASE_HREF token
import {Component, NgModule} from '@angular/core';
import {APP_BASE_HREF} from '@angular/common';

  providers: [{provide: APP_BASE_HREF, useValue: '/my/app'}]
class AppModule {}

The PathLocationStrategy is a LocationStrategy used to configure the location service to represent its state in the path of the browser's URL.

The PathLocationStrategy is the default strategy in Angular apps.
<base href="/">

The HashLocationStrategy supported by all browsers. This is the great advantages and it will not support server side rendering. This is the disadvantage.

The Location Strategy is recommended to use the HTML 5 style as your location strategy.

Example – Using the PathLocationStrategy and LocationStrategy

import {Location, LocationStrategy, PathLocationStrategy} from '@angular/common';
import {Component} from '@angular/core';

  selector: 'location-strategy',
  providers: [Location, {
               provide: LocationStrategy,
               useClass: PathLocationStrategy}
  template: `The Current URL Is - <span>{{PathLocation.path()}}</span>`
export class LocationStrategyComponent {
  PathLocation: Location;

  constructor(location: Location) {
    this.PathLocation = location;

 I hope you are enjoying with this post! Please share with you friends. Thank you!!

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog -
My Books - Book 1 and Book 2

What Is APP_BASE_HREF in Angular 4/5? What Is APP_BASE_HREF in Angular 4/5? Reviewed by Anil Singh on 3:01 AM Rating: (5) Powered by Blogger.