Custom encoding for urls using Angular 2 Router (using a + sign in place of a space)

Question

I am using an Angular 2 Router to update the query params in a URL for a search application. I am attempting to replace spaces in a query with + signs. However, + signs are

Answer 1

I tried @Noahs solution in Angular 9.1 for avoiding that a ? is replaced by %3F:

However, this did not work:

class CustomUrlSerializer implements UrlSerializer {
  parse(url: string): UrlTree {
    return this.defaultSerializer.parse(url)  
  }

  serialize(tree: UrlTree): string {
    return this.defaultSerializer.serialize(tree).replace(/%3F/g, '?');
  }
}

Angular had complained with following error message

client:159 src/app/app.module.ts:36:17 - error TS2339: Property 'defaultSerializer' does not exist on type 'CustomUrlSerializer'.

The following code has worked for me, though:

class CustomUrlSerializer extends DefaultUrlSerializer {
  parse(url: string): UrlTree {
    return super.parse(url)  
  }

  serialize(tree: UrlTree): string {
    return super.serialize(tree).replace(/%20/g, '+');
  }
}

There, I have replaced:

implements UrlSerializer --> extends DefaultUrlSerializer
this.defaultSerializer   --> super

Note: I have removed the following back-translation, since it replaces ? by %3F before routing an URL, but we want to keep it in this case:

  parse(url: string): UrlTree {
    url = url.replace(/\?/g, '%3F'); // <--- removed
    ...