tilde (~) is not being percent-encoded and duplicates itself in href and url

[digitalartcrew]

This issue tracker is for Bug Reports and Feature Requests only.

Please direct requests for help to StackOverflow.
See http://bit.ly/UIR-SOF for details.

This is a (check one box):

• [x ] Bug Report
• Feature Request
• General Query

My version of UI-Router is: (type version) 0.3.1

Bug Report

Current Behavior:

When setting a param with the value of a tilde ~ it is not percent ended and it duplicates in the url. For some example, I were to set myParam=~abc in the url it would display as pathName?myParam=~~abc and when using the param to make a subsequent query it would use the incorrect value.

Expected Behavior:

I expect when I set the param that it will be percent-encoded in url and href as /pathName?myParam=%7Eabc

Link to Plunker or stackblitz that reproduces the issue:

https://plnkr.co/edit/zhNFUDPPQeEMMo50Zt19

• [x ] I have already asked my question on StackOverflow and nobody could answer the question

https://stackoverflow.com/questions/59205703/how-do-i-prevent-angularjs-routing-from-encoding-a-url-parameter-with-a-tilde

[christopherthielen]

Hi, this is expected behavior because of a workaround for a bug/limitation of the AngularJS $location service regarding slash encoding/decoding.

This workaround changes the path parameter type so it encodes slashes as ~2F instead of %2F). Because of that arbitrarily chosen escape sequence, tildes also have to be treated specially, thus they are quoted as ~~. If you do not like this behavior, you can use a different parameter type, such as string by changing your state's URL from /state/list/:param to /state/list/{param:string}.

Other things worth noting:

• tilde is not a reserved character for percent encoding and thus will not be percent encoded by ui-router's default parameter types.
• slash encoding workaround is only present in the AngularJS version of UI-Router.

Hope this helps!

[digitalartcrew]

Just a note in my case (using "angular-ui-router": "^0.3.1") I had to change the state's URL from /state/list/:param to /state/list/{param:any} and it worked perfectly. Thanks for the guidance on this issue.