[BUG] TypeScript Angular Escape colon

[cubidobusinesssolutions]

Bug Report Checklist

• Have you provided a full/minimal spec to reproduce the issue?
• Have you validated the input using an OpenAPI validator (example)?
• What's the version of OpenAPI Generator used?
• Have you search for related issues/PRs?
• What's the actual output vs expected output?
• [Optional] Bounty to sponsor the fix (example)

Description

Query parameters are not escaped properly, e.g. a colon : is not escaped in query parameter values.

Actual

https://asdf.com/api/v1/items?name=:

Expected

https://asdf.com/api/v1/items?name=%3A

openapi-generator version

http://api-latest-master.openapi-generator.tech/api/gen/clients/typescript-angular

Steps to reproduce

• call some generated API and pass : into some query string value

Related issues/PRs

Revert "Don't escape [ and ] in query param keys"

Suggest a fix

Fix encoder.mustache

Before

import { HttpUrlEncodingCodec } from '@angular/common/http';

/**
* CustomHttpUrlEncodingCodec
* Fix plus sign (+) not encoding, so sent as blank space
* See: https://github.com/angular/angular/issues/11058#issuecomment-247367318
*/
export class CustomHttpUrlEncodingCodec extends HttpUrlEncodingCodec {
    encodeKey(k: string): string {
        k = super.encodeKey(k);
        return k.replace(/\+/gi, '%2B');
    }
    encodeValue(v: string): string {
        v = super.encodeValue(v);
        return v.replace(/\+/gi, '%2B');
    }
}

After

import { HttpParameterCodec } from '@angular/common/http';

/**
 * CustomHttpUrlEncodingCodec
 * Workaround for https://github.com/angular/angular/issues/18261
 */
export class CustomHttpUrlEncodingCodec extends HttpUrlEncodingCodec {
  encodeKey(k: string): string {
    return encodeURIComponent(k);
  }
  encodeValue(v: string): string {
    return encodeURIComponent(v);
  }
  decodeKey(k: string): string {
    return decodeURIComponent(k);
  }
  decodeValue(v: string): string {
    return decodeURIComponent(v);
  }
}

[macjohnny]

the solution you propose makes sense
@JohannesHoppe @akehir what do you think?

[macjohnny]

see also
https://stackoverflow.com/questions/49438737/how-to-escape-angular-httpparams/49440389#49440389
https://github.com/tiangolo/ngx-http-client#very-technical-details

[akehir]

I wonder if we should provide a facility to configure this, as I can image different projects having varying requirements (depending on the backend framework). In other words, we could have the encoder being injected into the api.

In general, however, the solution as proposed should be better than the angular default behaviour, though it might be a minor breaking change for some projects.

[macjohnny]

@cubidobusinesssolutions would you like to implement a runtime configuration option to pass a custom HttpParameterCodec if needed?

[cubidobusinesssolutions]

@cubidobusinesssolutions would you like to implement a runtime configuration option to pass a custom HttpParameterCodec if needed?

Ok, I will do it.