Angular 2+ (v11) automatically encode fragment hash (#) in URL into %23

Question

My Angular app has to automatically scroll (only Y-axis) to a certain component when a corresponding hash exists in the URL.

Eg url.com/page1#element1 should make the browser automatically scrolls to Element 1, naturally with #element1 inside the HTML tag.

But somehow my Angular app automatically replaces the hash (#) with %23, its URL-encoded version. This causes the problem that my app cannot recognise any fragment in the URL (I use this.activatedRoute.fragment.subscribe() to get the fragment value) I tried checking everywhere in the code, but I can't seem to find the source of the problem. Does anybody have any possible solution to this? Thank you!

Answer 1

Not really a fix, but I think this is a problem specific to my app. So I basically have 2 mode of my app, one is the normal ng serve and the other one is SSR mode (server side rendering). Basically this problem only shows up in the normal mode, but if I run the app with the SSR mode (also what I have in prod), the hash is being kept as-is.