Skip to content

fix(angular): url-encode path params when urlEncodeParameters is set - #3541

Merged
melloware merged 2 commits into
orval-labs:masterfrom
cghislai:fix/angular-url-encode-parameters
Jun 4, 2026
Merged

fix(angular): url-encode path params when urlEncodeParameters is set#3541
melloware merged 2 commits into
orval-labs:masterfrom
cghislai:fix/angular-url-encode-parameters

Conversation

@cghislai

@cghislai cghislai commented Jun 4, 2026

Copy link
Copy Markdown
Contributor

Wire makeRouteSafe into the Angular httpClient and httpResource builders and the angular-query client, mirroring query/fetch. Previously the flag was a no-op for these clients, so path params were interpolated raw.

Fixes #3540

Summary by CodeRabbit

  • New Features

    • Optional URL parameter encoding for Angular clients: path parameters and routes are URL-encoded when enabled to improve handling of special characters.
  • Tests

    • Added end-to-end test coverage verifying encoding on client and resource flows with encoding toggled.
  • Chores

    • Updated generator snapshots and test configurations to cover the new encoding behavior.

Wire makeRouteSafe into the Angular httpClient and httpResource builders
and the angular-query client, mirroring query/fetch. Previously the flag
was a no-op for these clients, so path params were interpolated raw.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@coderabbitai

coderabbitai Bot commented Jun 4, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: ef3057b4-26f0-44df-88ce-d0d4cfe47751

📥 Commits

Reviewing files that changed from the base of the PR and between e8e13ec and 92b1215.

📒 Files selected for processing (1)
  • tests/configs/angular.config.ts
🚧 Files skipped from review as they are similar to previous changes (1)
  • tests/configs/angular.config.ts

📝 Walkthrough

Walkthrough

This PR adds support for URL-encoding path parameters in Angular client generators (angular, angular-query, httpResource) by conditionally applying makeRouteSafe when the urlEncodeParameters configuration flag is enabled. Three generator entry points are updated alongside comprehensive test coverage validating the encoding behavior and generated output.

Changes

URL-encode parameters across Angular generators

Layer / File(s) Summary
HTTP client route encoding
packages/angular/src/http-client.ts, packages/angular/src/http-client.test.ts
Import makeRouteSafe from @orval/core and apply it to routes when context.output.urlEncodeParameters is enabled; tests verify encoding is applied to path parameters and mutator routes.
HTTP resource route encoding
packages/angular/src/http-resource.ts, packages/angular/src/http-resource.test.ts
Import makeRouteSafe and conditionally encode signal-transformed routes; tests confirm path parameter encoding via encodeURIComponent when enabled, unencoded when disabled.
Query client route encoding
packages/query/src/client.ts
Apply makeRouteSafe to routes in generateAngularHttpRequestFunction when the flag is set, extending encoding support to Angular Query client generation.
Angular query endpoint & model snapshots
tests/__snapshots__/angular-query/url-encode-parameters/{endpoints.ts, model/*}
Generated snapshot showing query functions, mutations, reactive injectors, faker mock factories, and MSW handlers for Petstore endpoints with path parameter encoding.
Angular httpResource endpoint & model snapshots
tests/__snapshots__/angular-url-encode-parameters-http-resource/{endpoints.ts, model/*}
Generated snapshot showing httpResource wrappers with signal-based reactivity, filterParams helper, SwaggerPetstoreService with observe-mode overloads, and resource state adapters.
Angular service endpoint & model snapshots
tests/__snapshots__/angular/url-encode-parameters/{endpoints.ts, model/*}
Generated snapshot showing traditional HttpClient service with observe-mode routing, parameter filtering, faker-based mock generators, and MSW handlers.
Test configuration for URL-encode-parameters
tests/configs/angular-query.config.ts, tests/configs/angular.config.ts
New Orval configuration entries enabling urlEncodeParameters: true for Angular, Angular Query, and httpResource clients to generate and validate the encoding behavior.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

  • orval-labs/orval#3405: Restores route-encoding behavior in the fetch client using makeRouteSafe, aligning with this PR's approach to standardize URL-parameter encoding across clients.

Suggested labels

angular

Suggested reviewers

  • melloware

🐰 Through Angular lands hopping fast,
Routes now encoded at last,
With makeRouteSafe in place,
URIs stay safe in their space,
URL params dance unsurpassed!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 41.67% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The PR title clearly and specifically describes the main change: enabling URL-encoding of path parameters in Angular clients when the urlEncodeParameters flag is set.
Linked Issues check ✅ Passed The PR implementation fully addresses issue #3540 by wiring makeRouteSafe into Angular httpClient, httpResource builders, and angular-query client to apply URL-encoding to path parameters when urlEncodeParameters is enabled.
Out of Scope Changes check ✅ Passed All changes are within scope: implementation updates to three Angular client generators, comprehensive test coverage with snapshots, and configuration additions. No unrelated modifications detected.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@tests/configs/angular.config.ts`:
- Around line 298-302: The Angular override uses the wrong property name: in the
override object under "angular" change the key from client to retrievalClient so
it matches other httpResource configs; locate the override block with angular {
client: 'httpResource' } and replace that property name with retrievalClient:
'httpResource' (ensure the value remains 'httpResource') so the httpResource
retrieval client is properly configured.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 5221c1be-2733-4c08-a7cd-d700d45142c2

📥 Commits

Reviewing files that changed from the base of the PR and between 1739cdf and e8e13ec.

📒 Files selected for processing (70)
  • packages/angular/src/http-client.test.ts
  • packages/angular/src/http-client.ts
  • packages/angular/src/http-resource.test.ts
  • packages/angular/src/http-resource.ts
  • packages/query/src/client.ts
  • tests/__snapshots__/angular-query/url-encode-parameters/endpoints.ts
  • tests/__snapshots__/angular-query/url-encode-parameters/model/cat.ts
  • tests/__snapshots__/angular-query/url-encode-parameters/model/catType.ts
  • tests/__snapshots__/angular-query/url-encode-parameters/model/createPetsBody.ts
  • tests/__snapshots__/angular-query/url-encode-parameters/model/createPetsParams.ts
  • tests/__snapshots__/angular-query/url-encode-parameters/model/createPetsSort.ts
  • tests/__snapshots__/angular-query/url-encode-parameters/model/dachshund.ts
  • tests/__snapshots__/angular-query/url-encode-parameters/model/dachshundBreed.ts
  • tests/__snapshots__/angular-query/url-encode-parameters/model/dog.ts
  • tests/__snapshots__/angular-query/url-encode-parameters/model/dogType.ts
  • tests/__snapshots__/angular-query/url-encode-parameters/model/error.ts
  • tests/__snapshots__/angular-query/url-encode-parameters/model/index.ts
  • tests/__snapshots__/angular-query/url-encode-parameters/model/labradoodle.ts
  • tests/__snapshots__/angular-query/url-encode-parameters/model/labradoodleBreed.ts
  • tests/__snapshots__/angular-query/url-encode-parameters/model/listPetsParams.ts
  • tests/__snapshots__/angular-query/url-encode-parameters/model/listPetsSort.ts
  • tests/__snapshots__/angular-query/url-encode-parameters/model/pet.ts
  • tests/__snapshots__/angular-query/url-encode-parameters/model/petCallingCode.ts
  • tests/__snapshots__/angular-query/url-encode-parameters/model/petCountry.ts
  • tests/__snapshots__/angular-query/url-encode-parameters/model/petWithTag.ts
  • tests/__snapshots__/angular-query/url-encode-parameters/model/pets.ts
  • tests/__snapshots__/angular/url-encode-parameters-http-resource/endpoints.ts
  • tests/__snapshots__/angular/url-encode-parameters-http-resource/model/cat.ts
  • tests/__snapshots__/angular/url-encode-parameters-http-resource/model/catType.ts
  • tests/__snapshots__/angular/url-encode-parameters-http-resource/model/createPetsBody.ts
  • tests/__snapshots__/angular/url-encode-parameters-http-resource/model/createPetsParams.ts
  • tests/__snapshots__/angular/url-encode-parameters-http-resource/model/createPetsSort.ts
  • tests/__snapshots__/angular/url-encode-parameters-http-resource/model/dachshund.ts
  • tests/__snapshots__/angular/url-encode-parameters-http-resource/model/dachshundBreed.ts
  • tests/__snapshots__/angular/url-encode-parameters-http-resource/model/dog.ts
  • tests/__snapshots__/angular/url-encode-parameters-http-resource/model/dogType.ts
  • tests/__snapshots__/angular/url-encode-parameters-http-resource/model/error.ts
  • tests/__snapshots__/angular/url-encode-parameters-http-resource/model/index.ts
  • tests/__snapshots__/angular/url-encode-parameters-http-resource/model/labradoodle.ts
  • tests/__snapshots__/angular/url-encode-parameters-http-resource/model/labradoodleBreed.ts
  • tests/__snapshots__/angular/url-encode-parameters-http-resource/model/listPetsParams.ts
  • tests/__snapshots__/angular/url-encode-parameters-http-resource/model/listPetsSort.ts
  • tests/__snapshots__/angular/url-encode-parameters-http-resource/model/pet.ts
  • tests/__snapshots__/angular/url-encode-parameters-http-resource/model/petCallingCode.ts
  • tests/__snapshots__/angular/url-encode-parameters-http-resource/model/petCountry.ts
  • tests/__snapshots__/angular/url-encode-parameters-http-resource/model/petWithTag.ts
  • tests/__snapshots__/angular/url-encode-parameters-http-resource/model/pets.ts
  • tests/__snapshots__/angular/url-encode-parameters/endpoints.ts
  • tests/__snapshots__/angular/url-encode-parameters/model/cat.ts
  • tests/__snapshots__/angular/url-encode-parameters/model/catType.ts
  • tests/__snapshots__/angular/url-encode-parameters/model/createPetsBody.ts
  • tests/__snapshots__/angular/url-encode-parameters/model/createPetsParams.ts
  • tests/__snapshots__/angular/url-encode-parameters/model/createPetsSort.ts
  • tests/__snapshots__/angular/url-encode-parameters/model/dachshund.ts
  • tests/__snapshots__/angular/url-encode-parameters/model/dachshundBreed.ts
  • tests/__snapshots__/angular/url-encode-parameters/model/dog.ts
  • tests/__snapshots__/angular/url-encode-parameters/model/dogType.ts
  • tests/__snapshots__/angular/url-encode-parameters/model/error.ts
  • tests/__snapshots__/angular/url-encode-parameters/model/index.ts
  • tests/__snapshots__/angular/url-encode-parameters/model/labradoodle.ts
  • tests/__snapshots__/angular/url-encode-parameters/model/labradoodleBreed.ts
  • tests/__snapshots__/angular/url-encode-parameters/model/listPetsParams.ts
  • tests/__snapshots__/angular/url-encode-parameters/model/listPetsSort.ts
  • tests/__snapshots__/angular/url-encode-parameters/model/pet.ts
  • tests/__snapshots__/angular/url-encode-parameters/model/petCallingCode.ts
  • tests/__snapshots__/angular/url-encode-parameters/model/petCountry.ts
  • tests/__snapshots__/angular/url-encode-parameters/model/petWithTag.ts
  • tests/__snapshots__/angular/url-encode-parameters/model/pets.ts
  • tests/configs/angular-query.config.ts
  • tests/configs/angular.config.ts

Comment thread tests/configs/angular.config.ts
`client` is a kept-for-compat alias; `retrievalClient` is the documented
preferred name. Output is identical (both normalize to the same value).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
let route = _route;
if (context.output.urlEncodeParameters) {
route = makeRouteSafe(route);
}

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think this belongs here as makeRouteSafe is used in /fetch/index.ts and /query/client.ts so moving this to here won't it double encode the routes now in Fetch and Tanstack Query?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This only affects the angular client (were in generateAngularHttpRequestFunction function).

Other clients are unaffected, and the generated code for them is identical with or without this change.

@melloware melloware added the angular Related to Angular generation issues label Jun 4, 2026
@melloware

Copy link
Copy Markdown
Collaborator

@soartec-lab do you remember why this is moved inside each client instead of at a higher level like it is in this PR?

@wadakatu any thoughts here

@cghislai
cghislai requested a review from melloware June 4, 2026 11:21
@melloware

Copy link
Copy Markdown
Collaborator

Ahhh I see now @cghislai thanks!

@melloware
melloware merged commit 665f592 into orval-labs:master Jun 4, 2026
6 checks passed
@soartec-lab

Copy link
Copy Markdown
Member

@melloware
I couldn't answer immediately. Thank you for contacting me.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

angular Related to Angular generation issues

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Path parameters not encoded in angular clients

3 participants