Angular Router URL Encoding Special Characters and Browser Behavior

I just can't figure out the solution for such problem. I'm designing search engine and I'd like to display in url what user is trying to find like this:

https://my-site.com/search;query=%28rockstar;search=true;page=0


User is trying to find (rockstar phrase.

When I paste this url to the browser it works as expected but the Chrome browser is displaying this url like this:

https://my-site.com/search;query=(rockstar;search=true;page=0


So the %28 is changed to (. I don't know if this behavior is Angular or Browser dependent. When I have url with ( then refreshing F5 is not working because Angular Router is reporting problem like this:

Cannot match any routes. URL Segment: 'rockstar;search=true;page=0'


Copying link from url address bar is also useless because of this behavior the copied link contains ( character (not %28). How to prevent %28 and other special characters to be not decoded by Browser in url address bar? The problem arises in Angular v5.2.5

Here is the demo with this problem: https://angular-url-problem.stackblitz.io

Notice that in Angular 6 the problem doesn't exists: https://angular-url-problem-v6.stackblitz.io

Continue reading...