python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 7, Interview Questions Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language

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!!

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - and
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like Powered by Blogger.
ASK Questions