Angular 11 HTTPClient will not encode "/" in query params

Question

So for some reason unknown to me, angular seems to have no way of encoding the / to %2F.

I've tried const encoder = new HttpUrlEncodingCodec. And encoding the value. I've also tried javascripts encodeURIComponent, which does work when logging the value, but in the network tab it is double encoded to %252F.

I can't find anything online about how to do this, or why it isn't working on it's own.

Any support would be appreciated.

public requestJourneyData$(payload): Observable<any> {
 const { country, selectedGoals, endPoint } = payload;
 const encoder = new HttpUrlEncodingCodec();
 encoder.encodeKey(selectedGoals); // Does nothing
 encoder.encodeValue(selectedGoals); // Does nothing
 new HttpUrlEncodingCodec().encodeValue(selectedGoals); // does nothing
 encodeURIComponent(selectedGoals); // Does work, but not when viewed in network requests in chrome dev tools.

 return this.http.get(`${endPoint}?`, {
   params: { selectedGoals, country },
 });}

Answer 1

Thanks to the comments above, it appears Angular will not allow you do manual encoding. The HttpClient does it all for you. The only current way to bypass this issue ref @evert: don't use params but just manually construct the URL (including everything after ?).

Thanks Evert!