Angular url plus sign converting to space

by

You can override default angular encoding with adding Interceptor which fixes this:

import { HttpInterceptor, HttpRequest, HttpEvent, HttpHandler, HttpParams, HttpParameterCodec } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { Observable } from "rxjs";

@Injectable()
export class EncodeHttpParamsInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const params = new HttpParams({encoder: new CustomEncoder(), fromString: req.params.toString()});
    return next.handle(req.clone({params}));
  }
}


class CustomEncoder implements HttpParameterCodec {
  encodeKey(key: string): string {
    return encodeURIComponent(key);
  }

  encodeValue(value: string): string {
    return encodeURIComponent(value);
  }

  decodeKey(key: string): string {
    return decodeURIComponent(key);
  }

  decodeValue(value: string): string {
    return decodeURIComponent(value);
  }
}

and declare it in providers section of in app.module.ts

providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: EncodeHttpParamsInterceptor,
      multi: true
    }
]

More Related Contents:

  1. Detect URLs in text with JavaScript
  2. What is the meaning of the “at” (@) prefix on npm packages?
  3. How to get current value of RxJS Subject or Observable?
  4. How to set locale in DatePipe in Angular 2?
  5. Dynamic template URLs in Angular 2
  6. Angular Cli Webpack, How to add or bundle external js files?
  7. Angular2 Dynamic input field lose focus when input changes
  8. How to Consume Http Component efficiently in a service in angular 2 beta?
  9. Angular 2.1.0 create child component on the fly, dynamically
  10. Angular4 – No value accessor for form control
  11. Regular expression for URL validation (in JavaScript)
  12. Crbug/1173575, non-JS module files deprecated. chromewebdata/(index)꞉5305:9:5551
  13. What is ngDefaultControl in Angular?
  14. Get javascript variable’s value in Django url template tag
  15. How to fetch URL of current Tab in my chrome extension using javascript
  16. npm WARN … requires a peer of … but none is installed. You must install peer dependencies yourself
  17. Property ‘entries’ does not exist on type ‘ObjectConstructor’
  18. Is there any method to get the URL without query string?
  19. Rxjs toPromise() deprecated
  20. How to check for isBrowser in Angular 4
  21. Change route params without reloading in Angular 2
  22. What is the difference between Observable and a Subject in rxjs?
  23. What is the difference between BehaviorSubject and Observable?
  24. Remove fragment in URL with JavaScript w/out causing page reload
  25. ChangeDetectionStrategy.OnPush and Observable.subscribe in Angular 2
  26. Angular 2 binding/events not working when adding template as innerHTML
  27. Javascript-Setting background image of a DIV via a function and function parameter
  28. Subscribe to observable is returning undefined
  29. Is it a bad practice to use jQuery in Angular? [closed]
  30. How to Inject Angular2 Http service into es6/7 Class?

Leave a Comment