Angular Universal - Transfer state is empty if url have unsafe character - duplicate xhr calls

Question

I'm using Angualar(12) with Angular Universal. I ran into a problem with a transfer state between server and client side. I'm using TransferHttpCacheModule in client side, and ServerTransferStateModule in server side module. I don't have any custom transfer state implementation.

For example:

Test URL: /a/b/c

This url doesn't contain any unsafe characters and everything works fine. HTML response has expected body and serverApp-state has expected data.

Test url: /a/b/여

This url have unsafe character and browser request for HTML looks like /a/b/%EC%97%AC. HTML respose for that request doesn't have expected body, and <script id="serverApp-state" type="application/json">{}</script></body></html> is empty and client side duplicates xhr calls.

Any ideas how to prevent duplicate xhr calls in this case?

Answer 1

I found a solution. I used encodeURIComponent in utf-16 url parts.