How to avoid decoding url with params on reload

Question

If a Link in an email contains an absolute URL-Path with Query-Param, Angular decodes this.

Navigation from menu works on this way <a [routerLink]="node.application.path" [queryParams]="{ reiter: node.application.argument}" (click)="onClickLink(node)">{{ node.name }}</a>

Result is a link like this example: http://localhost:4200/#/service/wissen/content/74433?reiter=74427

On reloading the Page, this will encoded to: http://localhost:4200/#/service/wissen/content/74433%3Freiter%3D74427

Same on Links in emails

Where am I wrong?

refer https://stackoverflow.com/questions/41476193/angular-2-disable-url-encoding — Ujjwal kaushik, Mar 29 '19 at 12:30
I am also having this issue, even though I am not using hash routing. I don't know why Angular encodes the URL bar! — Frozenfrank, Jun 24 '20 at 05:00

score 0 · Accepted Answer · answered Mar 29 '19 at 12:37

I believe this is a result of your router module using the HashLocationStrategy, which is evident by the # in your URL after http://localhost:4200/.

The hash fragment of the URL is treated as a string, and thus is encoded. It is not treated as Angular is treating it (containing the path and subsequent query parameters).

In order to fix this, you could simply change the location strategy of your router module:

RouterModule.forRoot(
    appRoutes,
    { useHash: false } // <-- will not use HashLocationStrategy
)

If you cannot change this (your config/deployment won't allow it), then you are stuck with the representation that Angular gives you from its router. Otherwise, you could simply bind to the href attribute and do the URL construction in your component logic. That way, whatever the outcome of the router construction of your URL, you could always utilize decodeURI() or decodeURIComponent() to display the raw URL.

How to avoid decoding url with params on reload

1 Answers1