Remove HashTag from route path in Angular 9

Question

Routing Module has common hashtag representation { useHash: true }, dont have for specific path.

  { path: 'documentDelivered', component: DocumentDeliveredComponent },
  { path: 'health', component: MonitoringComponent },

  @NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })],

http://localhost:4200/#/documentDelivered

I need to remove hashtag(#) only for below "health" path.

http://localhost:4200/#/health

Can you tell me if there is some other module there you are assigning (#) to some path ? — Sami Haroon, Nov 28 '19 at 09:38
Does this answer your question? [Angular 2 Remove Hash (#) from the URL](https://stackoverflow.com/questions/41687562/angular-2-remove-hash-from-the-url) — Alex Beugnet, Nov 28 '19 at 09:38
I don't think what you are doing is possible. It is entirely dependent on the whole Angular Router strategy chosen and cannot be changed in-app. — Alex Beugnet, Nov 28 '19 at 09:39
Angular router work with hash or without hash, not with both. https://angular.io/guide/router#appendix-locationstrategy-and-browser-url-styles — GaryB, Nov 28 '19 at 09:47
no you can't , either use it in all or you don't . you will have to choose a Router strategy — Joel Joseph, Nov 28 '19 at 09:52
@SamiHK, here using single routing-module, dont have another routing module. `imports: [RouterModule.forRoot(routes, { useHash: true })],` if we change to false, it affect all the path. i only require for partiular path. — Manoj, Nov 28 '19 at 09:53
@Mano You would need use REGEX for these routes and if REGEX-PATTERN matches you would have to replace the # by window.location.replace() — Sami Haroon, Nov 28 '19 at 10:03
To me it makes no sense to have two routing path strategies on the same app. I believe you should look into this as I've never seen any other project wanting to do that. — Alex Beugnet, Nov 28 '19 at 12:50

score 2 · Accepted Answer · answered Jul 01 '20 at 09:57

Steps I implemented and it's working fine

Remove useHash: true from router modules, By default its false.
Add / slash to base href in the index page

Now it working fine in the dev environment.

For prod, we need to add rules in (.htaccess) file.

Fix for restriction of redirection to siblings and children paths in the router. Basically the issue arises in prod not in dev.

<IfModule mod_rewrite.c>
  RewriteEngine On

  # Redirection of requests to index.html
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
  RewriteRule ^.*$ - [NC,L]
  RewriteRule ^(.*) index.html [NC,L]
</IfModule>

Ref: https://julianpoemp.github.io/ngx-htaccess-generator/#/generator

cheers :)

Remove HashTag from route path in Angular 9

1 Answers1