Angular Js

What is hash fragment. in Angular

What is hash fragment. in Angular

Hash fragment in Angular

This Article helps you to Understand, fragment. in Angular

To enable HashLocationStrategy in an Angular application we pass {useHash: true} when we are providing our routes with RouterModule

URL can contain some data prepended with a # character.
The # part of the URL is called the hash fragment.

It can be normal for developers who use the SPA to see a hash (#) at the URL. It is now possible to work on an application without noticing the infamous # character in the URL thanks to the new version of Angular.

Activate the hash (Mode 1)


import { NgModule }       from '@angular/core';
import { BrowserModule  } from '@angular/platform-browser';
import { AppComponent }   from './app.component';
import { HashLocationStrategy, LocationStrategy } from '@angular/common';

    declarations: [AppComponent],
    imports: [BrowserModule],
    providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}],
    bootstrap: [AppComponent],
export class AppModule {}


Activate the hash (Mode 2)


import { NgModule } from '@angular/core';
const routes: Routes = [//routes in here];
  imports: [
    RouterModule.forRoot(routes, { useHash: true })
  bootstrap: [AppComponent]
export class AppModule { }

Deepak Talwar

Deepak Talwar

Principal Software Engineer and Full Stack Developer with 12+ years of Professional Experience in Microsoft Technologies. Hands on experience with C#, ASP.NET, ASP.NET MVC, ASP.NET Core, WebAPI, Linq, Entity Framework, MS-SQL, NoSql, Javascript, Angular, jQuery, AWS, Azure, ReactJs, AngularJs, Laravel, Codeingiter, Serenity. VBA, Software Architecture, Web Design and Development.

Related Post

About Us

Community of IT Professionals

A Complete IT knowledgebase for any kind of Software Language, Development, Programming, Coding, Designing, Networking, Hardware and Digital Marketing.