Anchor link outside of Angular App refresh the page (skip to content link)

🐞 bug report

Affected Package

This issue might be caused by the @angular/router module.

Is this a regression?

It is probably not a regression regarding this similar issue talking about Angular 2 : https://github.com/angular/angular/issues/13622

Description

Hello, In my application I have a skip to content link for accessibility improvement. This link is created by an external script, and therefore is not inside my Angular App.

The skip link is just an HTML link with href="#anchor" and an element having the corresponding id in the DOM.

If I click on the skip link, on the “/” route, it works as intended. But if the path is not empty, the link seems to refresh the page to the root path and doesn’t go to the anchor.

🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-outside-anchor

1 - Click on the “Go to test route” to navigate to a /test path (you should see the component in the router-outlet) 2 - Click on the “Go to the anchor” link 3 - We can see the /test#anchor in the address bar, but it redirect instantly to /#anchor 4 - I’m not on the route I was and i didn’t get to the anchored (can i say that ?) element.

🌍 Your Environment

Angular Version: Angular 10, Angular 9

Notes

There is an onclick approach, as suggested in this SO response : https://stackoverflow.com/questions/50836497/using-html-anchor-link-id-in-angular-6 but I think the standard link approach without onclick event should work as intended.

The anchorScrolling: "enabled" option on the RouterModule doesn’t change anything.

[meriturva]

@vprothais see documentation about base and anchor: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}