Skip to content

Typescript-Angular: Fix several query parameters serialization issues #21949

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Typescript-Angular: Fix several query parameters serialization issues #21949

wants to merge 5 commits into from
+19,098 −1,179

Conversation

VladimirSvoboda
Copy link
Contributor

@VladimirSvoboda VladimirSvoboda commented Sep 11, 2025 •
edited
Loading

This notably fixes:

  • JSON query param serialization
  • array serialization with style=form and explode = true

The first commits of the patch introduces integration tests for query
parameters serialization in
samples/client/others/typescript-angular-v20:

  • samples/client/others/typescript-angular-v20/projects/app/src/api.query_param_deep_object.spec.ts (move of an existing test)
  • samples/client/others/typescript-angular-v20/projects/app/src/api.query_param_form.spec.ts (new test)
  • samples/client/others/typescript-angular-v20/projects/app/src/api.query_param_json.spec.ts (new test)

They should be executed as part of CircleCI.
The last commit fixes the issue.
Fixes are in the following files:

  • modules/openapi-generator/src/main/resources/typescript-angular/api.base.service.mustache
  • modules/openapi-generator/src/main/resources/typescript-angular/api.service.mustache
  • modules/openapi-generator/src/main/resources/typescript-angular/encoder.mustache

As the class HttpParams from Angular is specially designed for the
mimetype: application/x-www-form-urlencoded it does not support
the range of query parameters defined by the OpenAPI specification.
To workaround this issue, this patch introduces a custom
OpenAPIHttpParams class which supports a wider range of query param
styles.

Note that as HttpClient is used afterwards, the class
OpenApiHttpParams has a method to convert it into a HttpParams from
Angular with a no-op HttpParameterCodec to avoid double serialization of
the query parameters.

Fixes #21934.

PR checklist

  • Read the contribution guidelines.
  • Pull Request title clearly describes the work in the pull request and Pull Request description provides details about how to validate the work. Missing information here may result in delayed response from the community.
  • Run the following to build the project and update samples: 
    ./mvnw clean package || exit
./bin/generate-samples.sh ./bin/configs/*.yaml || exit
./bin/utils/export_docs_generators.sh || exit
    (For Windows users, please run the script in WSL)
    Commit all changed files.
    This is important, as CI jobs will verify all generator outputs of your HEAD commit as it would merge with master.
    These must match the expectations made by your contribution.
    You may regenerate an individual generator by passing the relevant config(s) as an argument to the script, for example ./bin/generate-samples.sh bin/configs/java*.
    IMPORTANT: Do NOT purge/delete any folders/files (e.g. tests) when regenerating the samples as manually written tests may be removed.
  • File the PR against the correct branch: master (upcoming 7.x.0 minor release - breaking changes with fallbacks), 8.0.x (breaking changes without fallbacks)
  • If your PR solves a reported issue, reference it using GitHub's linking syntax (e.g., having fixes #123 present in the PR description)
  • If your PR is targeting a particular programming language, @mention the technical committee members, so they are more likely to review the pull request.
    @TiFu (2017/07) @taxpon (2017/07) @sebastianhaas (2017/07) @kenisteward (2017/07) @Vrolijkx (2017/09) @macjohnny (2018/01) @topce (2018/10) @akehir (2019/07) @petejohansonxo (2019/11) @amakhrov (2020/02) @davidgamero (2022/03) @mkusaka (2022/04) @joscha (2024/10)

@VladimirSvoboda
Generate skeleton for new integration test
4260110
@VladimirSvoboda
Typescript-angular: Move query param deep-object test
fc0c5ab
@VladimirSvoboda
typescript-angular: Add query param JSON test
5876723
@VladimirSvoboda
Typescript-angular: Add query param form test
ca750c0
@VladimirSvoboda
typescript-angular: Reimplement query param serialisation
ad80f9f 
This notably fixes:
- JSON query param serialisation
- array serialisation with style=form and explode=true

As the class HttpParams from Angular is specially designed for the
mimetype: `application/x-www-form-urlencoded` it does not support
the range of query parameters defined by the OpenAPI specification.
To workaround this issue, this patch introduces a custom
`OpenAPIHttpParams` class which supports a wider range of query param
styles.

Note that as `HttpClient` is used afterwards, the class
`OpenApiHttpParams` has a method to convert it into a `HttpParams` from
Angular with a no-op HttpParameterCodec to avoid double serialisation of
the query parameters.
@kzander91
Copy link

Please also consider #20998, where query parameters are being serialized to JSON when it is not expected.

@VladimirSvoboda
Copy link
Contributor Author

Please also consider #20998, where query parameters are being serialized to JSON when it is not expected.

Even without my changes, the following test succeeds

openapi-generator/samples/client/others/typescript-angular-v20/projects/app/src/api.query_param_form.spec.ts

Lines 63 to 68 in ca750c0

it('should separate the query parameter with ampersands (object only)', async () => {
service.searchExplode(undefined, filter, undefined).subscribe();
const req = httpTesting.expectOne('http://localhost/search_explode?name=John&age=37');
expect(req.request.method).toEqual('GET');
});

Could you provide a minimal OpenAPI specification so that I could reproduce it ?

@kzander91
Copy link

kzander91 commented Sep 29, 2025 •
edited
Loading

My comment wasn't feedback on your PR, as I haven't tested your implementation, but rather a hint for you to please consider that some folks want the inverse of the issue you're trying to solve (#21934 wants JSON, but doesn't get it, #20998 gets JSON, but doesn't want it).
Specs and examples are given in the issue I have linked: #20998

If your implementation already considers this, please disregard my comment :)
Thanks

@VladimirSvoboda
Copy link
Contributor Author

Thanks for the clarification and I would be glad to fix another bug. However, your original issue does not contain an OpenAPI specification showing the problem.
This would be nice if you can provide one as I cannot reproduce the issue.

@kzander91
Copy link

kzander91 commented Sep 29, 2025 •
edited
Loading

You're right, sorry, I thought there was a spec in there 🙈
I have added one right now: #20998 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[BUG] Typescript-angular: JSON query params are not serialized as JSON
2 participants
@VladimirSvoboda @kzander91