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+ge+1997-06-21

" " symbol replaced with "+" 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 }
 )
}

CodePudding user response：

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.

CodePudding user response：

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 +. However it used to be implemented differently by Angular, which has been fixed with v14.