[typescript-angular] Add encoder configuration, fix default encoder

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

@@ -4,16 +4,15 @@
 import { Inject, Injectable, Optional }                      from '@angular/core';
 {{#useHttpClient}}
 import { HttpClient, HttpHeaders, HttpParams,
-         HttpResponse, HttpEvent }                           from '@angular/common/http';
-import { CustomHttpUrlEncodingCodec }                        from '../encoder';
+         HttpResponse, HttpEvent, HttpParameterCodec }       from '@angular/common/http';
+import { CustomHttpParameterCodec }                          from '../encoder';
 {{/useHttpClient}}
 {{^useHttpClient}}
-import { Http, Headers, URLSearchParams }                    from '@angular/http';
-import { RequestMethod, RequestOptions, RequestOptionsArgs } from '@angular/http';
-import { Response, ResponseContentType }                     from '@angular/http';
+import { Http, Headers, URLSearchParams,
+        RequestMethod, RequestOptions, RequestOptionsArgs,
+        Response, ResponseContentType, QueryEncoder }        from '@angular/http';
 import { CustomQueryEncoderHelper }                          from '../encoder';
 {{/useHttpClient}}
-
 {{^useRxJS6}}
 import { Observable }                                        from 'rxjs/Observable';
 {{/useRxJS6}}
@@ -59,6 +58,12 @@ export class {{classname}} {
     protected basePath = '{{{basePath}}}';
     public defaultHeaders = new {{#useHttpClient}}Http{{/useHttpClient}}Headers();
     public configuration = new Configuration();
+{{#useHttpClient}}
+    public encoder: HttpParameterCodec;
+{{/useHttpClient}}
+{{^useHttpClient}}
+    public encoder: QueryEncoder;
+{{/useHttpClient}}
 
     constructor(protected {{#useHttpClient}}httpClient: HttpClient{{/useHttpClient}}{{^useHttpClient}}http: Http{{/useHttpClient}}, @Optional()@Inject(BASE_PATH) basePath: string, @Optional() configuration: Configuration) {
 
@@ -69,6 +74,12 @@ export class {{classname}} {
         } else {
             this.configuration.basePath = basePath || this.basePath;
         }
+{{#useHttpClient}}
+        this.encoder = this.configuration.encoder || new CustomHttpParameterCodec();
+{{/useHttpClient}}
+{{^useHttpClient}}
+        this.encoder = this.configuration.encoder || new CustomQueryEncoderHelper();
+{{/useHttpClient}}
     }
 
     /**
@@ -143,10 +154,10 @@ export class {{classname}} {
 
 {{#hasQueryParams}}
         {{#useHttpClient}}
-        let queryParameters = new HttpParams({encoder: new CustomHttpUrlEncodingCodec()});
+        let queryParameters = new HttpParams({encoder: this.encoder});
         {{/useHttpClient}}
         {{^useHttpClient}}
-        let queryParameters = new URLSearchParams('', new CustomQueryEncoderHelper());
+        let queryParameters = new URLSearchParams('', this.encoder);
         {{/useHttpClient}}
 {{#queryParams}}
         {{#isListContainer}}
@@ -280,12 +291,12 @@ export class {{classname}} {
             formParams = new FormData();
         } else {
 {{#useHttpClient}}
-            formParams = new HttpParams({encoder: new CustomHttpUrlEncodingCodec()});
+            formParams = new HttpParams({encoder: this.encoder});
 {{/useHttpClient}}
 {{^useHttpClient}}
             // TODO: this fails if a parameter is a file, the api can't consume "multipart/form-data" and a blob is passed.
             convertFormParamsToString = true;
-            formParams = new URLSearchParams('', new CustomQueryEncoderHelper());
+            formParams = new URLSearchParams('', this.encoder);
             // set the content-type explicitly to avoid having it set to 'text/plain'
             headers.set('Content-Type', 'application/x-www-form-urlencoded;charset=UTF-8');
 {{/useHttpClient}}

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

@@ -1,10 +1,23 @@
+{{#useHttpClient}}
+import { HttpParameterCodec } from '@angular/common/http';
+{{/useHttpClient}}
+{{^useHttpClient}}
+import { QueryEncoder } from '@angular/http';
+{{/useHttpClient}}
+
 export interface ConfigurationParameters {
     apiKeys?: {[ key: string ]: string};
     username?: string;
     password?: string;
     accessToken?: string | (() => string);
     basePath?: string;
     withCredentials?: boolean;
+{{#useHttpClient}}
+    encoder?: HttpParameterCodec;
+{{/useHttpClient}}
+{{^useHttpClient}}
+    encoder?: QueryEncoder;
+{{/useHttpClient}}
 }
 
 export class Configuration {
@@ -14,6 +27,12 @@ export class Configuration {
     accessToken?: string | (() => string);
     basePath?: string;
     withCredentials?: boolean;
+{{#useHttpClient}}
+    encoder?: HttpParameterCodec;
+{{/useHttpClient}}
+{{^useHttpClient}}
+    encoder?: QueryEncoder;
+{{/useHttpClient}}
 
     constructor(configurationParameters: ConfigurationParameters = {}) {
         this.apiKeys = configurationParameters.apiKeys;
@@ -22,6 +41,7 @@ export class Configuration {
         this.accessToken = configurationParameters.accessToken;
         this.basePath = configurationParameters.basePath;
         this.withCredentials = configurationParameters.withCredentials;
+        this.encoder = configurationParameters.encoder;
     }
 
     /**

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

@@ -1,30 +1,33 @@
 {{#useHttpClient}}
-    import { HttpUrlEncodingCodec } from '@angular/common/http';
+import { HttpParameterCodec } from '@angular/common/http';
 {{/useHttpClient}}
 {{^useHttpClient}}
-    import { QueryEncoder } from '@angular/http';
+import { QueryEncoder } from '@angular/http';
 {{/useHttpClient}}
 
 {{#useHttpClient}}
 /**
-* CustomHttpUrlEncodingCodec
-* Fix plus sign (+) not encoding, so sent as blank space
-* See: https://github.com/angular/angular/issues/11058#issuecomment-247367318
+* Custom HttpParameterCodec
+* Workaround for https://github.com/angular/angular/issues/18261
 */
-export class CustomHttpUrlEncodingCodec extends HttpUrlEncodingCodec {
+export class CustomHttpParameterCodec implements HttpParameterCodec {
     encodeKey(k: string): string {
-        k = super.encodeKey(k);
-        return k.replace(/\+/gi, '%2B');
+        return encodeURIComponent(k);
     }
     encodeValue(v: string): string {
-        v = super.encodeValue(v);
-        return v.replace(/\+/gi, '%2B');
+        return encodeURIComponent(v);
+    }
+    decodeKey(k: string): string {
+        return decodeURIComponent(k);
+    }
+    decodeValue(v: string): string {
+        return decodeURIComponent(v);
     }
 }
 {{/useHttpClient}}
 {{^useHttpClient}}
 /**
-* CustomQueryEncoderHelper
+* Custom QueryEncoder
 * Fix plus sign (+) not encoding, so sent as blank space
 * See: https://github.com/angular/angular/issues/11058#issuecomment-247367318
 */

samples/client/petstore/typescript-angular-v2/default/api/pet.service.ts

@@ -12,11 +12,10 @@
 /* tslint:disable:no-unused-variable member-ordering */
 
 import { Inject, Injectable, Optional }                      from '@angular/core';
-import { Http, Headers, URLSearchParams }                    from '@angular/http';
-import { RequestMethod, RequestOptions, RequestOptionsArgs } from '@angular/http';
-import { Response, ResponseContentType }                     from '@angular/http';
+import { Http, Headers, URLSearchParams,
+        RequestMethod, RequestOptions, RequestOptionsArgs,
+        Response, ResponseContentType, QueryEncoder }        from '@angular/http';
 import { CustomQueryEncoderHelper }                          from '../encoder';
-
 import { Observable }                                        from 'rxjs/Observable';
 import '../rxjs-operators';
 
@@ -33,6 +32,7 @@ export class PetService {
     protected basePath = 'http://petstore.swagger.io/v2';
     public defaultHeaders = new Headers();
     public configuration = new Configuration();
+    public encoder: QueryEncoder;
 
     constructor(protected http: Http, @Optional()@Inject(BASE_PATH) basePath: string, @Optional() configuration: Configuration) {
 
@@ -43,6 +43,7 @@ export class PetService {
         } else {
             this.configuration.basePath = basePath || this.basePath;
         }
+        this.encoder = this.configuration.encoder || new CustomQueryEncoderHelper();
     }
 
     /**
@@ -307,7 +308,7 @@ export class PetService {
             throw new Error('Required parameter status was null or undefined when calling findPetsByStatus.');
         }
 
-        let queryParameters = new URLSearchParams('', new CustomQueryEncoderHelper());
+        let queryParameters = new URLSearchParams('', this.encoder);
         if (status) {
             queryParameters.set('status', status.join(COLLECTION_FORMATS['csv']));
         }
@@ -361,7 +362,7 @@ export class PetService {
             throw new Error('Required parameter tags was null or undefined when calling findPetsByTags.');
         }
 
-        let queryParameters = new URLSearchParams('', new CustomQueryEncoderHelper());
+        let queryParameters = new URLSearchParams('', this.encoder);
         if (tags) {
             queryParameters.set('tags', tags.join(COLLECTION_FORMATS['csv']));
         }
@@ -548,7 +549,7 @@ export class PetService {
         } else {
             // TODO: this fails if a parameter is a file, the api can't consume "multipart/form-data" and a blob is passed.
             convertFormParamsToString = true;
-            formParams = new URLSearchParams('', new CustomQueryEncoderHelper());
+            formParams = new URLSearchParams('', this.encoder);
             // set the content-type explicitly to avoid having it set to 'text/plain'
             headers.set('Content-Type', 'application/x-www-form-urlencoded;charset=UTF-8');
         }
@@ -624,7 +625,7 @@ export class PetService {
         } else {
             // TODO: this fails if a parameter is a file, the api can't consume "multipart/form-data" and a blob is passed.
             convertFormParamsToString = true;
-            formParams = new URLSearchParams('', new CustomQueryEncoderHelper());
+            formParams = new URLSearchParams('', this.encoder);
             // set the content-type explicitly to avoid having it set to 'text/plain'
             headers.set('Content-Type', 'application/x-www-form-urlencoded;charset=UTF-8');
         }

samples/client/petstore/typescript-angular-v2/default/api/store.service.ts

@@ -12,11 +12,10 @@
 /* tslint:disable:no-unused-variable member-ordering */
 
 import { Inject, Injectable, Optional }                      from '@angular/core';
-import { Http, Headers, URLSearchParams }                    from '@angular/http';
-import { RequestMethod, RequestOptions, RequestOptionsArgs } from '@angular/http';
-import { Response, ResponseContentType }                     from '@angular/http';
+import { Http, Headers, URLSearchParams,
+        RequestMethod, RequestOptions, RequestOptionsArgs,
+        Response, ResponseContentType, QueryEncoder }        from '@angular/http';
 import { CustomQueryEncoderHelper }                          from '../encoder';
-
 import { Observable }                                        from 'rxjs/Observable';
 import '../rxjs-operators';
 
@@ -32,6 +31,7 @@ export class StoreService {
     protected basePath = 'http://petstore.swagger.io/v2';
     public defaultHeaders = new Headers();
     public configuration = new Configuration();
+    public encoder: QueryEncoder;
 
     constructor(protected http: Http, @Optional()@Inject(BASE_PATH) basePath: string, @Optional() configuration: Configuration) {
 
@@ -42,6 +42,7 @@ export class StoreService {
         } else {
             this.configuration.basePath = basePath || this.basePath;
         }
+        this.encoder = this.configuration.encoder || new CustomQueryEncoderHelper();
     }
 
     /**

samples/client/petstore/typescript-angular-v2/default/api/user.service.ts

@@ -12,11 +12,10 @@
 /* tslint:disable:no-unused-variable member-ordering */
 
 import { Inject, Injectable, Optional }                      from '@angular/core';
-import { Http, Headers, URLSearchParams }                    from '@angular/http';
-import { RequestMethod, RequestOptions, RequestOptionsArgs } from '@angular/http';
-import { Response, ResponseContentType }                     from '@angular/http';
+import { Http, Headers, URLSearchParams,
+        RequestMethod, RequestOptions, RequestOptionsArgs,
+        Response, ResponseContentType, QueryEncoder }        from '@angular/http';
 import { CustomQueryEncoderHelper }                          from '../encoder';
-
 import { Observable }                                        from 'rxjs/Observable';
 import '../rxjs-operators';
 
@@ -32,6 +31,7 @@ export class UserService {
     protected basePath = 'http://petstore.swagger.io/v2';
     public defaultHeaders = new Headers();
     public configuration = new Configuration();
+    public encoder: QueryEncoder;
 
     constructor(protected http: Http, @Optional()@Inject(BASE_PATH) basePath: string, @Optional() configuration: Configuration) {
 
@@ -42,6 +42,7 @@ export class UserService {
         } else {
             this.configuration.basePath = basePath || this.basePath;
         }
+        this.encoder = this.configuration.encoder || new CustomQueryEncoderHelper();
     }
 
     /**
@@ -410,7 +411,7 @@ export class UserService {
             throw new Error('Required parameter password was null or undefined when calling loginUser.');
         }
 
-        let queryParameters = new URLSearchParams('', new CustomQueryEncoderHelper());
+        let queryParameters = new URLSearchParams('', this.encoder);
         if (username !== undefined && username !== null) {
             queryParameters.set('username', <any>username);
         }

samples/client/petstore/typescript-angular-v2/default/configuration.ts

@@ -1,10 +1,13 @@
+import { QueryEncoder } from '@angular/http';
+
 export interface ConfigurationParameters {
     apiKeys?: {[ key: string ]: string};
     username?: string;
     password?: string;
     accessToken?: string | (() => string);
     basePath?: string;
     withCredentials?: boolean;
+    encoder?: QueryEncoder;
 }
 
 export class Configuration {
@@ -14,6 +17,7 @@ export class Configuration {
     accessToken?: string | (() => string);
     basePath?: string;
     withCredentials?: boolean;
+    encoder?: QueryEncoder;
 
     constructor(configurationParameters: ConfigurationParameters = {}) {
         this.apiKeys = configurationParameters.apiKeys;
@@ -22,6 +26,7 @@ export class Configuration {
         this.accessToken = configurationParameters.accessToken;
         this.basePath = configurationParameters.basePath;
         this.withCredentials = configurationParameters.withCredentials;
+        this.encoder = configurationParameters.encoder;
     }
 
     /**

samples/client/petstore/typescript-angular-v2/default/encoder.ts

@@ -1,7 +1,7 @@
-    import { QueryEncoder } from '@angular/http';
+import { QueryEncoder } from '@angular/http';
 
 /**
-* CustomQueryEncoderHelper
+* Custom QueryEncoder
 * Fix plus sign (+) not encoding, so sent as blank space
 * See: https://github.com/angular/angular/issues/11058#issuecomment-247367318
 */