We are currently using Angular Version 12 and implemented anchor tags in couple of our pages.
Following is how we configured our Routing Module:
@NgModule({ imports: [RouterModule.forRoot(routes, { initialNavigation: 'enabled', scrollPositionRestoration: 'enabled', onSameUrlNavigation: 'reload', relativeLinkResolution: 'legacy', anchorScrolling: 'enabled' })], exports: [RouterModule] })
So when we navigate to "localhost:4200/emp#grades" for the first time then the "#grades" is removed from the url and the page does not scroll to the anchor tag. Now if I manually go to the URL and add "#grades" and then press enter then it will scroll to the div which has id "grades". If I refresh the page again it stops working. So only manually adding the fragment in the url is working.
Can someone let me know what is causing this issue.