Angular: String id fields sometimes produce 400 Bad requests in requests using the id as part of the path

[OmarHawk]

Overview of the issue

In some browsers we do receive 400 Bad Requests errors when letting Angular frontend perform certain requests.

Currently, our service methods in the Angular generator use this approach to produce the path to the corresponding API, e.g. in the find case:

find(id: string): Observable<EntityResponseType> {
    return this.http
      .get<RestMyEntity>(`${this.resourceUrl}/${id}`, { observe: 'response' })
      .pipe(map(res => this.convertResponseFromServer(res)));
  }

The template interpolation here will not take care of characters that are special characters for URLs (like the | character)

Motivation for or Use Case

Should still succeed, no matter what the ID contains.

Reproduce the error

Related issues

Suggest a Fix

JHipster Version(s)

8.11.0

Browsers and Operating System

Found by a Firefox user

• Tickets opened without reproduction steps or that doesn't follows the template recommendation will be closed.
• This issue is prompt-related or an error that prevents JHipster from generating an application.
• I don't have a JDL otherwise I should open an JDL Issue
• The application is not successfully generated otherwise, I should open an Issue with jhipster info
• Checking this box is mandatory (this is just to show you read everything)

[mshima]

There is very old bug related to this.