feat(angular): support paramsSerializer (#2275)

snebjorn · web-flow · commit 4a9750835b4a · 2025-08-02T14:04:30.000-04:00
diff --git a/.prettierignore b/.prettierignore
@@ -10,3 +10,6 @@ node_modules
 mockServiceWorker.js
 yarn.lock
 .svelte-kit
+
+# Angular build cache
+**/.angular/cache
diff --git a/docs/src/pages/reference/configuration/output.md b/docs/src/pages/reference/configuration/output.md
@@ -2343,7 +2343,7 @@ export const customFormUrlEncodedFn = <Body>(body: Body): URLSearchParams => {
 
 Type: `String` or `Object`.
 
-IMPORTANT: This is only valid when using `axios`.
+IMPORTANT: This is only valid when using `axios` or `angular`.
 
 Valid values: path of the paramsSerializer function or object with a path and name.
 
diff --git a/packages/core/src/generators/options.ts b/packages/core/src/generators/options.ts
@@ -37,6 +37,7 @@ export const generateAxiosOptions = ({
   requestOptions,
   hasSignal,
   isVue,
+  isAngular,
   paramsSerializer,
   paramsSerializerOptions,
 }: {
@@ -47,6 +48,7 @@ export const generateAxiosOptions = ({
   requestOptions?: object | boolean;
   hasSignal: boolean;
   isVue: boolean;
+  isAngular: boolean;
   paramsSerializer?: GeneratorMutator;
   paramsSerializerOptions?: ParamsSerializerOptions;
 }) => {
@@ -107,6 +109,8 @@ export const generateAxiosOptions = ({
     if (queryParams) {
       if (isVue) {
         value += '\n        params: {...unref(params), ...options?.params},';
+      } else if (isAngular && paramsSerializer) {
+        value += `\n        params: ${paramsSerializer.name}({...params, ...options?.params}),`;
       } else {
         value += '\n        params: {...params, ...options?.params},';
       }
@@ -117,7 +121,11 @@ export const generateAxiosOptions = ({
     }
   }
 
-  if (queryParams && (paramsSerializer || paramsSerializerOptions?.qs)) {
+  if (
+    !isAngular &&
+    queryParams &&
+    (paramsSerializer || paramsSerializerOptions?.qs)
+  ) {
     if (paramsSerializer) {
       value += `\n        paramsSerializer: ${paramsSerializer.name},`;
     } else {
@@ -175,6 +183,7 @@ export const generateOptions = ({
     isExactOptionalPropertyTypes,
     hasSignal,
     isVue: isVue ?? false,
+    isAngular: isAngular ?? false,
     paramsSerializer,
     paramsSerializerOptions,
   });
diff --git a/samples/angular-app/orval.config.ts b/samples/angular-app/orval.config.ts
@@ -12,6 +12,9 @@ export default defineConfig({
       tsconfig: './tsconfig.app.json',
       clean: true,
       override: {
+        paramsSerializer: {
+          path: 'src/api/mutator/custom-params-serializer.ts',
+        },
         operations: {
           listPets: {
             mutator: 'src/api/mutator/response-type.ts',
diff --git a/samples/angular-app/src/api/endpoints/pets/pets.service.ts b/samples/angular-app/src/api/endpoints/pets/pets.service.ts
@@ -28,6 +28,7 @@ import type {
 } from '../../model';
 
 import listPetsMutator from '../../mutator/response-type';
+import paramsSerializerMutator from '../../mutator/custom-params-serializer';
 
 interface HttpClientOptions {
   headers?: HttpHeaders | Record<string, string | string[]>;
@@ -80,7 +81,7 @@ export class PetsService {
   ): Observable<any> {
     return this.http.get<TData>(`/v${version}/search`, {
       ...options,
-      params: { ...params, ...options?.params },
+      params: paramsSerializerMutator({ ...params, ...options?.params }),
     });
   }
   /**
diff --git a/samples/angular-app/src/api/mutator/custom-params-serializer.ts b/samples/angular-app/src/api/mutator/custom-params-serializer.ts
@@ -0,0 +1,15 @@
+import type { HttpParams } from '@angular/common/http';
+
+type AngularHttpParams =
+  | HttpParams
+  | Record<
+      string,
+      string | number | boolean | readonly (string | number | boolean)[]
+    >
+  | undefined;
+
+export default function (params: Record<string, any>): AngularHttpParams {
+  // do your implementation to transform the params
+
+  return params;
+}
diff --git a/samples/hono/hono-with-fetch-client/next-app/app/gen/models/createPetsBodyItem.ts b/samples/hono/hono-with-fetch-client/next-app/app/gen/models/createPetsBodyItem.ts
@@ -0,0 +1,11 @@
+/**
+ * Generated by orval v7.11.2 🍺
+ * Do not edit manually.
+ * Swagger Petstore
+ * OpenAPI spec version: 1.0.0
+ */
+
+export type CreatePetsBodyItem = {
+  name: string;
+  tag: string;
+};
diff --git a/samples/hono/hono-with-fetch-client/next-app/app/gen/models/error.ts b/samples/hono/hono-with-fetch-client/next-app/app/gen/models/error.ts
@@ -0,0 +1,11 @@
+/**
+ * Generated by orval v7.11.2 🍺
+ * Do not edit manually.
+ * Swagger Petstore
+ * OpenAPI spec version: 1.0.0
+ */
+
+export interface Error {
+  code: number;
+  message: string;
+}
diff --git a/samples/hono/hono-with-fetch-client/next-app/app/gen/models/index.ts b/samples/hono/hono-with-fetch-client/next-app/app/gen/models/index.ts
@@ -0,0 +1,12 @@
+/**
+ * Generated by orval v7.11.2 🍺
+ * Do not edit manually.
+ * Swagger Petstore
+ * OpenAPI spec version: 1.0.0
+ */
+
+export * from './createPetsBodyItem';
+export * from './error';
+export * from './listPetsParams';
+export * from './pet';
+export * from './pets';
diff --git a/samples/hono/hono-with-fetch-client/next-app/app/gen/models/listPetsParams.ts b/samples/hono/hono-with-fetch-client/next-app/app/gen/models/listPetsParams.ts
@@ -0,0 +1,13 @@
+/**
+ * Generated by orval v7.11.2 🍺
+ * Do not edit manually.
+ * Swagger Petstore
+ * OpenAPI spec version: 1.0.0
+ */
+
+export type ListPetsParams = {
+  /**
+   * How many items to return at one time (max 100)
+   */
+  limit?: string;
+};
diff --git a/samples/hono/hono-with-fetch-client/next-app/app/gen/models/pet.ts b/samples/hono/hono-with-fetch-client/next-app/app/gen/models/pet.ts
@@ -0,0 +1,12 @@
+/**
+ * Generated by orval v7.11.2 🍺
+ * Do not edit manually.
+ * Swagger Petstore
+ * OpenAPI spec version: 1.0.0
+ */
+
+export interface Pet {
+  id: number;
+  name: string;
+  tag: string;
+}
diff --git a/samples/hono/hono-with-fetch-client/next-app/app/gen/models/pets.ts b/samples/hono/hono-with-fetch-client/next-app/app/gen/models/pets.ts
@@ -0,0 +1,9 @@
+/**
+ * Generated by orval v7.11.2 🍺
+ * Do not edit manually.
+ * Swagger Petstore
+ * OpenAPI spec version: 1.0.0
+ */
+import type { Pet } from './pet';
+
+export type Pets = Pet[];
diff --git a/samples/hono/hono-with-fetch-client/next-app/app/gen/pets/pets.msw.ts b/samples/hono/hono-with-fetch-client/next-app/app/gen/pets/pets.msw.ts
@@ -0,0 +1,146 @@
+/**
+ * Generated by orval v7.11.2 🍺
+ * Do not edit manually.
+ * Swagger Petstore
+ * OpenAPI spec version: 1.0.0
+ */
+import { faker } from '@faker-js/faker';
+
+import { HttpResponse, delay, http } from 'msw';
+
+import type { Pet, Pets } from '.././models';
+
+export const getListPetsResponseMock = (): Pets =>
+  Array.from(
+    { length: faker.number.int({ min: 1, max: 10 }) },
+    (_, i) => i + 1,
+  ).map(() => ({
+    id: faker.number.int({ min: undefined, max: undefined }),
+    name: faker.string.alpha({ length: { min: 10, max: 20 } }),
+    tag: faker.string.alpha({ length: { min: 10, max: 20 } }),
+  }));
+
+export const getCreatePetsResponseMock = (
+  overrideResponse: Partial<Pet> = {},
+): Pet => ({
+  id: faker.number.int({ min: undefined, max: undefined }),
+  name: faker.string.alpha({ length: { min: 10, max: 20 } }),
+  tag: faker.string.alpha({ length: { min: 10, max: 20 } }),
+  ...overrideResponse,
+});
+
+export const getUpdatePetsResponseMock = (
+  overrideResponse: Partial<Pet> = {},
+): Pet => ({
+  id: faker.number.int({ min: undefined, max: undefined }),
+  name: faker.string.alpha({ length: { min: 10, max: 20 } }),
+  tag: faker.string.alpha({ length: { min: 10, max: 20 } }),
+  ...overrideResponse,
+});
+
+export const getShowPetByIdResponseMock = (
+  overrideResponse: Partial<Pet> = {},
+): Pet => ({
+  id: faker.number.int({ min: undefined, max: undefined }),
+  name: faker.string.alpha({ length: { min: 10, max: 20 } }),
+  tag: faker.string.alpha({ length: { min: 10, max: 20 } }),
+  ...overrideResponse,
+});
+
+export const getListPetsMockHandler = (
+  overrideResponse?:
+    | Pets
+    | ((
+        info: Parameters<Parameters<typeof http.get>[1]>[0],
+      ) => Promise<Pets> | Pets),
+) => {
+  return http.get('*/pets', async (info) => {
+    await delay(1000);
+
+    return new HttpResponse(
+      JSON.stringify(
+        overrideResponse !== undefined
+          ? typeof overrideResponse === 'function'
+            ? await overrideResponse(info)
+            : overrideResponse
+          : getListPetsResponseMock(),
+      ),
+      { status: 200, headers: { 'Content-Type': 'application/json' } },
+    );
+  });
+};
+
+export const getCreatePetsMockHandler = (
+  overrideResponse?:
+    | Pet
+    | ((
+        info: Parameters<Parameters<typeof http.post>[1]>[0],
+      ) => Promise<Pet> | Pet),
+) => {
+  return http.post('*/pets', async (info) => {
+    await delay(1000);
+
+    return new HttpResponse(
+      JSON.stringify(
+        overrideResponse !== undefined
+          ? typeof overrideResponse === 'function'
+            ? await overrideResponse(info)
+            : overrideResponse
+          : getCreatePetsResponseMock(),
+      ),
+      { status: 200, headers: { 'Content-Type': 'application/json' } },
+    );
+  });
+};
+
+export const getUpdatePetsMockHandler = (
+  overrideResponse?:
+    | Pet
+    | ((
+        info: Parameters<Parameters<typeof http.put>[1]>[0],
+      ) => Promise<Pet> | Pet),
+) => {
+  return http.put('*/pets', async (info) => {
+    await delay(1000);
+
+    return new HttpResponse(
+      JSON.stringify(
+        overrideResponse !== undefined
+          ? typeof overrideResponse === 'function'
+            ? await overrideResponse(info)
+            : overrideResponse
+          : getUpdatePetsResponseMock(),
+      ),
+      { status: 200, headers: { 'Content-Type': 'application/json' } },
+    );
+  });
+};
+
+export const getShowPetByIdMockHandler = (
+  overrideResponse?:
+    | Pet
+    | ((
+        info: Parameters<Parameters<typeof http.get>[1]>[0],
+      ) => Promise<Pet> | Pet),
+) => {
+  return http.get('*/pets/:petId', async (info) => {
+    await delay(1000);
+
+    return new HttpResponse(
+      JSON.stringify(
+        overrideResponse !== undefined
+          ? typeof overrideResponse === 'function'
+            ? await overrideResponse(info)
+            : overrideResponse
+          : getShowPetByIdResponseMock(),
+      ),
+      { status: 200, headers: { 'Content-Type': 'application/json' } },
+    );
+  });
+};
+export const getPetsMock = () => [
+  getListPetsMockHandler(),
+  getCreatePetsMockHandler(),
+  getUpdatePetsMockHandler(),
+  getShowPetByIdMockHandler(),
+];
diff --git a/samples/hono/hono-with-fetch-client/next-app/app/gen/pets/pets.ts b/samples/hono/hono-with-fetch-client/next-app/app/gen/pets/pets.ts
diff --git a/samples/swr-with-zod/src/gen/endpoints/pets/pets.zod.ts b/samples/swr-with-zod/src/gen/endpoints/pets/pets.zod.ts
diff --git a/yarn.lock b/yarn.lock
