Http URL Params "+" symbol replaced with "%2B" (Angular 14)

Question

Recently I upgraded angular app 13 version to 14 version. I see some of the API calls failing which were working fine in angular 13.

API Call (Angular 13)

domain.com/api/v2/todos/count?filter=created+ge+1997-06-21

API Call (Angular 14)

domain.com/api/v2/todos/count?filter=created%2Bge%2B1997-06-21

"+" symbol replaced with "%2B" causing issue, Is there any way to send + in URL as is?

component.ts

const filter = "created+ge+1997-06-21"
service.todosCount(filter).subscribe()

service.ts

todosCount(params) {
 return this.http.get<TodosCount[]>(
  '/afes_case_api/v1/cases/state_count',{ params }
 )
}

Answer 1

I've been thinking about your question and trying to learn what I can about it.

I believe that the issue you are having is with URL Encoding. This simply means that certain characters/symbols are restricted or "reserved". Source: [0]

"What does URL encoding do? URL Encoding (Percent Encoding)

URL encoding converts characters into a format that can be transmitted over the Internet. URLs can only be sent over the Internet using the ASCII character-set. Since URLs often contain characters outside the ASCII set, the URL has to be converted into a valid ASCII format." Source: [1]

Below is a list of some useful sources if you want to do some further reading.

Source[0]: https://www.urlencoder.org/

Source[1]: https://www.url-encode-decode.com/

Source[2]: https://www.w3schools.com/tags/ref_urlencode.asp

Source[3]: https://help.marklogic.com/knowledgebase/article/View/using-url-encoding-to-handle-special-characters-in-a-document-uri

My Proposed Solution: Use unreserved characters to separate the information in the string. I believe the following characters will work without being encoded:

1. • (minus)
2. _ (underscore)
3. . (period)
4. ~ (tilde)

Alternative: I looked at rickz comment and I think it may be more useful if you want to keep the "+" symbol.

Answer 2

Like figured out in the comment, you intend to send white spaces to the backend. So it's as easy as replacing the + character with white spaces:

const filter = "created ge 1997-06-21"

Background

Please check the changelog for Angular 14. In http section, it says:

Queries including + will now actually query for + instead of space. Most workarounds involving custom codecs will be unaffected. Possible server-side workarounds will need to be undone.

Servers usually decode + as white space, as white spaces are not supported in URLs. In order to be able to distinguish between the "white space" + and the "real" +, it is common sense to encode the + character to %2B. However it used to be implemented differently by Angular, which has been fixed with v14.