Parentheses break Angular routing on page refresh

Question

I am able to get to the following path from within the angular application (by clicking on the product link that has a routerLink):

{basePath}/product/trek-monda-slr-frameset-(h2-fit)-2016

However, once I refresh the page angular throws an error in the console and will not serve up the page:

Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'h2-fit'

My guess is that the angular router doesn't allow parentheses. But aren't parentheses valid characters in urls for most browsers?

Why isn't Angular allowing this?

Answer 1

I know this isn't the most helpful, but it looks like there is an open bug on Angular's github that relates to this issue:

https://github.com/angular/angular/issues/10280

If you have those parenthese hard coded then you could do like this comment says and replace them. https://github.com/angular/angular/issues/10280#issuecomment-279784004