Search code examples
angularangular-routingangular9

How to remove hash from url in Angular 9 and also update the url in the browser to the current url

This question is not the same as this one.

I need to know how to remove the hash from from the url and also update the url in the browser.

@NgModule({
  imports: [RouterModule.forRoot(routes, { anchorScrolling: 'enabled', useHash: false, scrollPositionRestoration:'enabled' })],


"@angular/router": "~9.1.2",

Current behavior:

Url in browser: /something

User clicks: <a [routerLink]="['/home']" fragment="home" >Home</a>

Browser navigates to: /home

Url in browser: /home#home

Page scrolls to: #home

Behavior when using answer to question cited above:

Url in browser: /something

User clicks: <a [routerLink]="['/home']" fragment="home" skipLocationChange>Home</a>

Browser navigates to: /home

Url in browser: /something

Page scrolls to: #home

Desired behavior:

Url in browser: /something

User clicks: <a [routerLink]="['/home']" fragment="home" >Home</a>

Browser navigates to: /home

Url in browser: /home // desired behavior is that current url is shown in browser without hash.

Page scrolls to: #home

Solution

  • https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

    To save your and our time, we will systematically close all issues that are requests for general support and redirect people to Stack Overflow.

    The answer to this question is: Don't use unsupported frameworks.