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

Answer 1

Steps I implemented and it's working fine

1. Remove useHash: true from router modules, By default its false.

2. 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 :)