Typescript-Angular: Fix several query parameters serialization issues

CI/circle_parallel.sh

@@ -73,7 +73,7 @@ elif [ "$NODE_INDEX" = "3" ]; then
   export NVM_DIR="/opt/circleci/.nvm"
   [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
   #nvm install stable
-  # install v16 instead of the latest stable version
+  # install v18 instead of the latest stable version
   nvm install 18
   nvm alias default 18
   node --version
@@ -83,6 +83,7 @@ elif [ "$NODE_INDEX" = "3" ]; then
   echo "[ -s \"$NVM_DIR/nvm.sh\" ] && . \"$NVM_DIR/nvm.sh\"" >> $BASH_ENV
 
   (cd samples/client/others/typescript-angular && mvn integration-test)
+  (cd samples/client/others/typescript-angular-v20 && mvn integration-test)
   (cd samples/client/petstore/typescript-angular-v12-provided-in-root && mvn integration-test)
   (cd samples/client/petstore/typescript-angular-v13-provided-in-root && mvn integration-test)
   (cd samples/client/petstore/typescript-angular-v14-provided-in-root && mvn integration-test)

bin/configs/typescript-angular-v20-query-param-deep-object.yaml

@@ -0,0 +1,8 @@
+generatorName: typescript-angular
+outputDir: samples/client/others/typescript-angular-v20/builds/query-param-deep-object
+inputSpec: modules/openapi-generator/src/test/resources/3_0/query-param-deep-object.yaml
+templateDir: modules/openapi-generator/src/main/resources/typescript-angular
+additionalProperties:
+  ngVersion: 20.0.0
+  npmName: sample-angular-20-0-0-query-param-deep-object
+  supportsES6: true

bin/configs/typescript-angular-v20-query-param-form.yaml

@@ -0,0 +1,8 @@
+generatorName: typescript-angular
+outputDir: samples/client/others/typescript-angular-v20/builds/query-param-form
+inputSpec: modules/openapi-generator/src/test/resources/3_0/query-param-form.yaml
+templateDir: modules/openapi-generator/src/main/resources/typescript-angular
+additionalProperties:
+  ngVersion: 20.0.0
+  npmName: sample-angular-20-0-0-query-param-form
+  supportsES6: true

bin/configs/typescript-angular-v20-query-param-json.yaml

@@ -0,0 +1,8 @@
+generatorName: typescript-angular
+outputDir: samples/client/others/typescript-angular-v20/builds/query-param-json
+inputSpec: modules/openapi-generator/src/test/resources/3_0/query-param-json.yaml
+templateDir: modules/openapi-generator/src/main/resources/typescript-angular
+additionalProperties:
+  ngVersion: 20.0.0
+  npmName: sample-angular-20-0-0-query-param-json
+  supportsES6: true

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 = httpParams.append(k, value[k]);
+                        });
+                        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 NoOpHttpParameterCodec 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;
+    }
+}