Angular2 url parameter encoding

Question

When navigating to a URL with a querystring like:

http://localhost:5000/search?q=test+test the url suddenly becomes http://localhost:5000/search?query=test%2Btest

Is it possible to alter this behaviour? I don't see anything wrong with the plus sign and I'd like to keep the sign in the url for various reasons.

Sounds like this issue https://github.com/angular/angular/issues/11058 — Günter Zöchbauer, Sep 16 '16 at 15:43

score 0 · Answer 1 · answered Mar 26 '18 at 15:20

As described in this answer, you can provide your own custom url serializer by implementing the UrlSerializer. The serializer should look something like this:

class CustomUrlSerializer implements UrlSerializer {
    parse(url: string): UrlTree {
        // Custom code here
    }

    serialize(tree: UrlTree): string {
        // Custom code here
    }
}

You then need to provide your own implementation instead of the UrlSerializer:

providers: [
    { provide: UrlSerializer, useClass: CustomUrlSerializer },
    ...
]

score -1 · Answer 2 · answered Jul 17 '17 at 09:05

-1

The plus sign is not a valid character in an url. But %2B is equivalent to + so at the reciving end it will be possible to parse it back to +

answered Jul 17 '17 at 09:05

orsolli

54
7

1

It's perfectly valid to have the plus sign in the path of an url – freakshow Aug 02 '17 at 08:19

Angular2 url parameter encoding

2 Answers2