typescript-angular: Reimplement query param serialisation

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.

Author: VladimirSvoboda

modules/openapi-generator/src/main/java/org/openapitools/codegen/languages/TypeScriptAngularClientCodegen.java

@@ -204,6 +204,7 @@ public void processOpts() {
         supportingFiles.add(new SupportingFile("param.mustache", getIndexDirectory(), "param.ts"));
         supportingFiles.add(new SupportingFile("gitignore", "", ".gitignore"));
         supportingFiles.add(new SupportingFile("git_push.sh.mustache", "", "git_push.sh"));
+        supportingFiles.add(new SupportingFile("queryParams.mustache", getIndexDirectory(), "query.params.ts"));
 
         if(ngVersionAtLeast_17) {
             supportingFiles.add(new SupportingFile("README.mustache", getIndexDirectory(), "README.md"));

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

@@ -2,6 +2,7 @@
 import { HttpHeaders, HttpParams, HttpParameterCodec } from '@angular/common/http';
 import { CustomHttpParameterCodec } from './encoder';
 import { {{configurationClassName}} } from './configuration';
+import { OpenApiHttpParams, QueryParamStyle, concatHttpParamsObject} from './query.params';
 
 export class BaseService {
     protected basePath = '{{{basePath}}}';
@@ -29,47 +30,58 @@ export class BaseService {
         return consumes.indexOf('multipart/form-data') !== -1;
     }
 
-    protected addToHttpParams(httpParams: HttpParams, value: any, key?: string, isDeep: boolean = false): HttpParams {
-        // If the value is an object (but not a Date), recursively add its keys.
-        if (typeof value === 'object' && !(value instanceof Date)) {
-            return this.addToHttpParamsRecursive(httpParams, value, isDeep ? key : undefined, isDeep);
-        }
-        return this.addToHttpParamsRecursive(httpParams, value, key);
-    }
-
-    protected addToHttpParamsRecursive(httpParams: HttpParams, value?: any, key?: string, isDeep: boolean = false): HttpParams {
+    protected addToHttpParams(httpParams: OpenApiHttpParams, key: string, value: any | null | undefined, paramStyle: QueryParamStyle, explode: boolean): OpenApiHttpParams {
         if (value === null || value === undefined) {
             return httpParams;
         }
-        if (typeof value === 'object') {
-            // If JSON format is preferred, key must be provided.
-            if (key != null) {
-                return isDeep
-                    ? Object.keys(value as Record<string, any>).reduce(
-                        (hp, k) => hp.append(`${key}[${k}]`, value[k]),
-                        httpParams,
-                    )
-                    : httpParams.append(key, JSON.stringify(value));
+
+        if (paramStyle === QueryParamStyle.DeepObject) {
+            if (typeof value !== 'object') {
+                throw Error(`An object must be provided for key ${key} as it is a deep object`);
             }
-            // Otherwise, if it's an array, add each element.
-            if (Array.isArray(value)) {
-                value.forEach(elem => httpParams = this.addToHttpParamsRecursive(httpParams, elem, key));
+
+            return Object.keys(value as Record<string, any>).reduce(
+                (hp, k) => hp.append(`${key}[${k}]`, value[k]),
+                httpParams,
+            );
+        } else if (paramStyle === QueryParamStyle.Json) {
+            return httpParams.append(key, JSON.stringify(value));
+        } else {
+            // Form-style, SpaceDelimited or PipeDelimited
+
+            if (Object(value) !== value) {
+                // If it is a primitive type, add its string representation
+                return httpParams.append(key, value.toString());
             } else if (value instanceof Date) {
-                if (key != null) {
-                    httpParams = httpParams.append(key, value.toISOString());
+                return httpParams.append(key, value.toISOString());
+            } else if (Array.isArray(value)) {
+                // Otherwise, if it's an array, add each element.
+                if (paramStyle === QueryParamStyle.Form) {
+                    return httpParams.set(key, value, {explode: explode, delimiter: ','});
+                } else if (paramStyle === QueryParamStyle.SpaceDelimited) {
+                    return httpParams.set(key, value, {explode: explode, delimiter: ' '});
                 } else {
-                    throw Error("key may not be null if value is Date");
+                    // PipeDelimited
+                    return httpParams.set(key, value, {explode: explode, delimiter: '|'});
                 }
             } else {
-                Object.keys(value).forEach(k => {
-                    const paramKey = key ? `${key}.${k}` : k;
-                    httpParams = this.addToHttpParamsRecursive(httpParams, value[k], paramKey);
-                });
+                // Otherwise, if it's an object, add each field.
+                if (paramStyle === QueryParamStyle.Form) {
+                    if (explode) {
+                        Object.keys(value).forEach(k => {
+                            httpParams = this.addToHttpParams(httpParams, k, value[k], paramStyle, explode);
+                        });
+                        return httpParams;
+                    } else {
+                        return concatHttpParamsObject(httpParams, key, value, ',');
+                    }
+                } else if (paramStyle === QueryParamStyle.SpaceDelimited) {
+                    return concatHttpParamsObject(httpParams, key, value, ' ');
+                } else {
+                    // PipeDelimited
+                    return concatHttpParamsObject(httpParams, key, value, '|');
+                }
             }
-            return httpParams;
-        } else if (key != null) {
-            return httpParams.append(key, value);
         }
-        throw Error("key may not be null if value is not object or array");
     }
 }

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

@@ -3,10 +3,10 @@
 
 import { Inject, Injectable, Optional }                      from '@angular/core';
 import { HttpClient, HttpHeaders, HttpParams,
-         HttpResponse, HttpEvent, HttpParameterCodec{{#httpContextInOptions}}, HttpContext {{/httpContextInOptions}}
+         HttpResponse, HttpEvent{{#httpContextInOptions}}, HttpContext {{/httpContextInOptions}}
         }       from '@angular/common/http';
-import { CustomHttpParameterCodec }                          from '../encoder';
 import { Observable }                                        from 'rxjs';
+import { OpenApiHttpParams, QueryParamStyle } from '../query.params';
 
 {{#imports}}
 // @ts-ignore
@@ -86,6 +86,7 @@ export class {{classname}} extends BaseService {
      {{/useSingleRequestParameter}}
      * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
      * @param reportProgress flag to report request and response progress.
+     * @param options additional options
      {{#isDeprecated}}
      * @deprecated
      {{/isDeprecated}}
@@ -106,32 +107,46 @@ export class {{classname}} extends BaseService {
 {{/allParams}}
 
 {{#hasQueryParamsOrAuth}}
-        let localVarQueryParameters = new HttpParams({encoder: this.encoder});
+        let localVarQueryParameters = new OpenApiHttpParams(this.encoder);
 {{#queryParams}}
-        {{#isArray}}
-        if ({{paramName}}) {
-        {{#isQueryParamObjectFormatJson}}
-        localVarQueryParameters = this.addToHttpParams(localVarQueryParameters,
-            <any>{{paramName}}, '{{baseName}}');
-        {{/isQueryParamObjectFormatJson}}
-        {{^isQueryParamObjectFormatJson}}
-        {{#isCollectionFormatMulti}}
-            {{paramName}}.forEach((element) => {
-                localVarQueryParameters = this.addToHttpParams(localVarQueryParameters,
-                  <any>element, '{{baseName}}');
-            })
-        {{/isCollectionFormatMulti}}
-        {{^isCollectionFormatMulti}}
-            localVarQueryParameters = this.addToHttpParams(localVarQueryParameters,
-                [...{{paramName}}].join(COLLECTION_FORMATS['{{collectionFormat}}']), '{{baseName}}');
-        {{/isCollectionFormatMulti}}
-        {{/isQueryParamObjectFormatJson}}
-        }
-        {{/isArray}}
-        {{^isArray}}
-        localVarQueryParameters = this.addToHttpParams(localVarQueryParameters,
-          <any>{{paramName}}, '{{baseName}}'{{#isDeepObject}}, true{{/isDeepObject}});
-        {{/isArray}}
+
+        localVarQueryParameters = this.addToHttpParams(
+            localVarQueryParameters,
+            '{{baseName}}',
+            <any>{{paramName}},
+            {{#isQueryParamObjectFormatJson}}
+            QueryParamStyle.Json,
+            {{/isQueryParamObjectFormatJson}}
+            {{^isQueryParamObjectFormatJson}}
+            {{^style}}
+            {{#queryIsJsonMimeType}}
+            QueryParamStyle.Json,
+            {{/queryIsJsonMimeType}}
+            {{^queryIsJsonMimeType}}
+            QueryParamStyle.Form,
+            {{/queryIsJsonMimeType}}
+            {{/style}}
+            {{#style}}
+            {{#isDeepObject}}
+            QueryParamStyle.DeepObject,
+            {{/isDeepObject}}
+            {{#isFormStyle}}
+            QueryParamStyle.Form,
+            {{/isFormStyle}}
+            {{#isSpaceDelimited}}
+            QueryParamStyle.SpaceDelimited,
+            {{/isSpaceDelimited}}
+            {{#isPipeDelimited}}
+            QueryParamStyle.PipeDelimited,
+            {{/isPipeDelimited}}
+            {{#queryIsJsonMimeType}}
+            QueryParamStyle.Json,
+            {{/queryIsJsonMimeType}}
+            {{/style}}
+            {{/isQueryParamObjectFormatJson}}
+            {{isExplode}},
+        );
+
 {{/queryParams}}
 
 {{/hasQueryParamsOrAuth}}
@@ -290,7 +305,7 @@ export class {{classname}} extends BaseService {
     {{/hasFormParams}}
     {{/bodyParam}}
     {{#hasQueryParamsOrAuth}}
-                params: localVarQueryParameters,
+                params: localVarQueryParameters.toHttpParams(),
     {{/hasQueryParamsOrAuth}}
     {{#isResponseFile}}
                 responseType: "blob",

modules/openapi-generator/src/main/resources/typescript-angular/encoder.mustache

@@ -18,3 +18,18 @@ export class CustomHttpParameterCodec implements HttpParameterCodec {
         return decodeURIComponent(v);
     }
 }
+
+export class IdentityHttpParameterCodec implements HttpParameterCodec {
+    encodeKey(k: string): string {
+        return k;
+    }
+    encodeValue(v: string): string {
+        return v;
+    }
+    decodeKey(k: string): string {
+        return k;
+    }
+    decodeValue(v: string): string {
+        return v;
+    }
+}

modules/openapi-generator/src/main/resources/typescript-angular/queryParams.mustache

@@ -0,0 +1,160 @@
+import { HttpParams, HttpParameterCodec } from '@angular/common/http';
+import { CustomHttpParameterCodec, IdentityHttpParameterCodec } from './encoder';
+
+export enum QueryParamStyle {
+    Json,
+    Form,
+    DeepObject,
+    SpaceDelimited,
+    PipeDelimited,
+}
+
+export type Delimiter = "," | " " | "|" | "\t";
+
+export interface ParamOptions {
+    /** When true, serialized as multiple repeated key=value pairs. When false, serialized as a single key with joined values using `delimiter`. */
+    explode?: boolean;
+    /** Delimiter used when explode=false. The delimiter itself is inserted unencoded between encoded values. */
+    delimiter?: Delimiter;
+}
+
+interface ParamEntry {
+    values: string[];
+    options: Required<ParamOptions>;
+}
+
+export class OpenApiHttpParams {
+    private params: Map<string, ParamEntry> = new Map();
+    private defaults: Required<ParamOptions>;
+    private encoder: HttpParameterCodec;
+
+    /**
+     * @param encoder  Parameter serializer
+     * @param defaults Global defaults used when a specific parameter has no explicit options.
+     *                 By OpenAPI default, explode is true for query params with style=form.
+     */
+    constructor(encoder?: HttpParameterCodec, defaults?: { explode?: boolean; delimiter?: Delimiter }) {
+        this.encoder = encoder || new CustomHttpParameterCodec();
+        this.defaults = {
+            explode: defaults?.explode ?? true,
+            delimiter: defaults?.delimiter ?? ",",
+        };
+    }
+
+    private resolveOptions(local?: ParamOptions): Required<ParamOptions> {
+        return {
+            explode: local?.explode ?? this.defaults.explode,
+            delimiter: local?.delimiter ?? this.defaults.delimiter,
+        };
+    }
+
+    /**
+     * Replace the parameter's values and (optionally) its options.
+     * Options are stored per-parameter (not global).
+     */
+    set(key: string, values: string[] | string, options?: ParamOptions): this {
+        const arr = Array.isArray(values) ? values.slice() : [values];
+        const opts = this.resolveOptions(options);
+        this.params.set(key, {values: arr, options: opts});
+        return this;
+    }
+
+    /**
+     * Append a single value to the parameter. If the parameter didn't exist it will be created
+     * and use resolved options (global defaults merged with any provided options).
+     */
+    append(key: string, value: string, options?: ParamOptions): this {
+        const entry = this.params.get(key);
+        if (entry) {
+            // If new options provided, override the stored options for subsequent serialization
+            if (options) {
+                entry.options = this.resolveOptions({...entry.options, ...options});
+            }
+            entry.values.push(value);
+        } else {
+            this.set(key, [value], options);
+        }
+        return this;
+    }
+
+    /**
+     * Serialize to a query string according to per-parameter OpenAPI options.
+     * - If explode=true for that parameter → repeated key=value pairs (each value encoded).
+     * - If explode=false for that parameter → single key=value where values are individually encoded
+     *   and joined using the configured delimiter. The delimiter character is inserted AS-IS
+     *   (not percent-encoded).
+     */
+    toString(): string {
+        const records = this.toRecord();
+        const parts: string[] = [];
+
+        for (const key in records) {
+            parts.push(`${key}=${records[key]}`);
+        }
+
+        return parts.join("&");
+    }
+
+    /**
+     * Return parameters as a plain record.
+     * - If a parameter has exactly one value, returns that value directly.
+     * - If a parameter has multiple values, returns a readonly array of values.
+     */
+    toRecord(): Record<string, string | number | boolean | ReadonlyArray<string | number | boolean>> {
+        const parts: Record<string, string | number | boolean | ReadonlyArray<string | number | boolean>> = {};
+
+        for (const [key, entry] of this.params.entries()) {
+            const encodedKey = this.encoder.encodeKey(key);
+
+            if (entry.options.explode) {
+                parts[encodedKey] = entry.values.map((v) => this.encoder.encodeValue(v));
+            } else {
+                const encodedValues = entry.values.map((v) => this.encoder.encodeValue(v));
+
+                // join with the delimiter *unencoded*
+                parts[encodedKey] = encodedValues.join(entry.options.delimiter);
+            }
+        }
+
+        return parts;
+    }
+
+    /**
+     * Return an Angular's HttpParams with an identity parameter codec as the parameters are already encoded.
+     */
+    toHttpParams(): HttpParams {
+        const records = this.toRecord();
+
+        let httpParams = new HttpParams({encoder: new IdentityHttpParameterCodec()});
+
+        return httpParams.appendAll(records);
+    }
+}
+
+export function concatHttpParamsObject(httpParams: OpenApiHttpParams, key: string, item: {
+    [index: string]: any
+}, delimiter: Delimiter): OpenApiHttpParams {
+    let keyAndValues: string[] = [];
+
+    for (const k in item) {
+        keyAndValues.push(k);
+
+        const value = item[k];
+
+        if (Array.isArray(value)) {
+            keyAndValues.push(...value.map(convertToString));
+        } else {
+            keyAndValues.push(convertToString(value));
+        }
+    }
+
+    return httpParams.set(key, keyAndValues, {explode: false, delimiter: delimiter});
+}
+
+function convertToString(value: any): string {
+    if (value instanceof Date) {
+         return value.toISOString();
+    } else {
+        return value.toString();
+    }
+}

modules/openapi-generator/src/main/resources/typescript-angular/tsconfig.mustache

@@ -5,6 +5,9 @@
         "noImplicitAny": false,
         "target": "{{#supportsES6}}es6{{/supportsES6}}{{^supportsES6}}es5{{/supportsES6}}",
         "module": "{{#supportsES6}}es6{{/supportsES6}}{{^supportsES6}}commonjs{{/supportsES6}}",
+        {{^supportsES6}}
+        "downlevelIteration": true,
+        {{/supportsES6}}
         "moduleResolution": "node",
         "removeComments": true,
         "strictNullChecks": true,