angular 2 disable url encoding

by

Angular2 by default uses encodeURIComponent() to encode queryParams in URL, you can avoid it by writing custom URL serializer and override default functionality.

In my case, I wanted to avoid Angular2 to avoid replacing comma(,) by (%2). I was passing Query as lang=en-us,en-uk where it was getting converted to lang=en-us%2en-uk.

Here how I worked it out:

CustomUrlSerializer.ts

import {UrlSerializer, UrlTree, DefaultUrlSerializer} from '@angular/router';

export class CustomUrlSerializer implements UrlSerializer {
    parse(url: any): UrlTree {
        let dus = new DefaultUrlSerializer();
        return dus.parse(url);
    }

    serialize(tree: UrlTree): any {
        let dus = new DefaultUrlSerializer(),
            path = dus.serialize(tree);
        // use your regex to replace as per your requirement.
        return path.replace(/%2/g,',');
    }
}

Add below line to your main appModule.ts

import {UrlSerializer} from '@angular/router';
import {CustomUrlSerializer} from './CustomUrlSerializer';

@NgModule({
    providers: [{ provide: UrlSerializer, useClass: CustomUrlSerializer }]
})

This won’t break your default functionality and take cares of URL as per your need.

More Related Contents:

  1. Using http rest apis with angular 2
  2. How to redirect to an external URL from angular2 route without using component?
  3. Angular 2 router event listener
  4. In Angular, how do you determine the active route?
  5. How to do the chain sequence in rxjs
  6. Angular2 router 2.0.0 not reloading components when same url loaded with different parameters?
  7. Angular 2 – Chaining http requests
  8. Change route params without reloading in Angular 2
  9. How to handle query parameters in angular 2
  10. Load JSON content from a local file with http.get() in Angular 2
  11. Angular 2 Final Release Router Unit Test
  12. Autoscroll in Angular 2
  13. based on mobile number how do i get country code in javascript or anguler 2+ [duplicate]
  14. Angular: Can’t find Promise, Map, Set and Iterator
  15. Angular2 component’s “this” is undefined when executing callback function
  16. Angular 2: TypeError: l_thing0 is undefined in [{{thing.title}} in AppComponent@4:44]
  17. Load existing components dynamically Angular 2 Final Release
  18. Angular 6: HTML table create dynamic columns and rows
  19. How to make a disabled reactive form Editable in Angular2
  20. Firestore Timestamp.fromDate not UTC
  21. Angular 2 – How to pass URL parameters?
  22. execute a function when *ngFor finished in angular 2
  23. How to cancel a subscription in Angular2
  24. Correct way Provide DomSanitizer to Component with Angular 2 RC6
  25. get all the href attributes of a web site [duplicate]
  26. How to iterate using ngFor loop Map containing key as string and values as map iteration
  27. Angular why asterisk (*)
  28. binding data to angular checkbox
  29. How to detect firestore connection failure
  30. iframe inside angular2 component, Property ‘contentWindow’ does not exist on type ‘HTMLElement’

Leave a Comment