How do I prevent AngularJS routing from encoding a url parameter with a ~ (tilde)

Question

Currently when I pass a param to $state.go that includes a ~ it duplicates when the url is being created.

Example:

I search for ~abc. Then pass to $state.go('.', {myParam: "~abc"}). Then inside url I have https://localhost/somePath?myParam=~~abc

According to RFC3986 the '~' must be percent-encoded in HTML forms to "%7E". If I encode prior then I still have the same issue. So I assume the value must be handled inside of $stateProvider or by customizing $urlmatcherfactoryprovider inside of UI router.

Answer 1

I was able to fix by passing a type of any to my state's url queryParam since it is not encoded by UrlMatcherFactory by updating the /state?:param to /state?{param:any} since this is expected behavior for ~ to ~~. More details can be found here: https://github.com/angular-ui/ui-router/issues/3790