APP_BASE_HREF

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';

@NgModule({
  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';

@Component({
  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

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - https://code-sample.com and https://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.
ASK Questions