Angular 2 Remove Hash (#) from the URL

Question

I am trying to remove the # sign from the url in Angular 2 but I couldn't find any good explanation about how to remove it without generate any problem.

I remember on AngularJS 1 it was easier adding $locationProvider.html5Mode(true);

Also I would appreciate if you can tell me if this is a good practice (removing #) or could affect the SEO for the application (or improve it).

PS: I am using Angular 2 with typescript

seidme · Accepted Answer · 2021-03-25T18:12:41.970

98

As @Volodymyr Bilyachat pointed out, PathLocationStrategy is a default location strategy in Angular2, and if the # is present in the url, it must have been that's overridden somewhere.

Beside the module providers, check your module imports, it can also be overridden by providing the { useHash: true } as the second argument of the RouterModule.forRoot:

imports: [
    ...
    RouterModule.forRoot(routes, { useHash: true })  // remove second argument
]

Also note that when using PathLocationStrategy you need to configure your web server to serve index.html (app's entry point) for all requested locations.

Here are configuration examples for some of the popular web servers: https://angular.io/guide/deployment#fallback-configuration-examples

edited Mar 25 '21 at 18:12

answered Jan 17 '17 at 01:55

seidme

12,543
5
36
40

2

Folks, In ng build --prod this solution is not working, gives 404 error..any clue? – HydTechie Jul 26 '17 at 13:55
6

This solves the problem of # removal but when we refresh the page or h5 this doen't work. – Jinna Balu Nov 04 '17 at 06:13
2

@HydTechie, JinnaBalu, When using PathLocationStrategy (HTML5 routing), you need to configure your webserver to serve index.html file (app's entry point) for all requested urls. – seidme Dec 17 '17 at 03:34
HI Seid, can you please let me know what and how to configure the web-server, when using the PathLocationStrategy. – Jun 07 '18 at 11:31
1

@SuchetaShrivastava The Angular docs added a section of examples for web server configurations for PathLocationStrategy implementations: https://angular.io/guide/deployment#fallback-configuration-examples – Talador12 Aug 10 '18 at 19:40
I have one more file(callback.html) except index.html and I am using PathLocationStrategy. But I am not able to hit that callback.html file. what can be the issue ? – Gopal Zadafiya Jul 26 '19 at 06:28
to remove the hash I had to use `RouterModule.forRoot(routes, {useHash: false})` (Angular 8) – Alessandro Santamaria Oct 17 '19 at 14:29

score 41 · Answer 2 · answered Jan 17 '17 at 01:14

41

In angular there is location strategy

Look into app.module.ts where app is bootstrapped there you have

@NgModule({
.......
  providers: [
....
    { provide: LocationStrategy, useClass: HashLocationStrategy },
....
]
});

And remove this part since PathLocationStrategy is default strategy

answered Jan 17 '17 at 01:14

Vova Bilyachat

18,765
4
55
80

1

its working for ng serve, but not for ng build --prod, any clue? thanks! – HydTechie Jul 17 '17 at 14:36
The error is 404, the link without # is showing as 404 in IIS.. I know there were some setting required to setup in iis to redirect, but i was looking without that, if possible. appreciate! – HydTechie Jul 19 '17 at 07:15
@HydTechie no its not. Look for SPApageFallback package – Vova Bilyachat Jul 19 '17 at 07:50
@VolodymyrBilyachat, If I use `HashLocationStrategy `, the `navigate` does not work in both developement and production any Idea ? – Nimatullah Razmjo Nov 13 '17 at 18:47
@VolodymyrBilyachat this tric is not working on production... but works in local – Vishwa Pratap Dec 14 '19 at 09:45

score 24 · Answer 3 · edited Jan 17 '19 at 15:10

Above answers have the correct explanation about removing the Hash from the URL, but when you change LocationStrategy your back-end will be affected because the back-end doesn't understand all of your Angular 2 Routes. Here are the steps to remove hash with the back-end support.

1) Change Angular to use PathLocationStrategy

@NgModule({
  .....
  providers: [
    // Below line is optional as default LocationStrategy is PathLocationStrategy
    {provide: LocationStrategy, useClass: PathLocationStrategy} 
  ]
})

2) Change the base Href in index.html, Angular2 will handle all routes post base Href

<base href="/app-context/">

For example

<base href="/app/">

3) At the backend server, we must render the index.html file for any request coming with below pattern

"/app/**" - Render index.html for any request coming with "/app/**" pattern

index.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My App</title>
    <base href="/app/">
  </head>
  <body>
    <app-root>Loading...</app-root>
    <script type="text/javascript" src="vendor.bundle.js"></script>
    <script type="text/javascript" src="main.bundle.js"></script>
  </body>
</html>

can you give a brief explanation about "/app-context/". – Hemanth Poluru May 06 '19 at 08:25 — Hemanth Poluru, May 06 '19 at 08:25

Angular 2 Remove Hash (#) from the URL

3 Answers3

Linked

Related