angular 2 disable url encoding

Question

I would like to disable url encoding.

When I use this below.

this.router.navigate(['/profile', { tags: 'one,two' }]);

The url is like this

http://localhost:4200/profile;tags=one%2Ctwo

I would like it to be pretty like below

http://localhost:4200/profile;tags=one,two

Is there a way to disable the url encoding?

check this http://stackoverflow.com/questions/22944932/angularjs-resource-how-to-disable-url-entity-encoding — Deep, Jan 05 '17 at 02:05
@Deep, your link is for angular 1, which is a bit different. — Derrick, Jan 05 '17 at 16:15
In some (simple) cases you can serialize by yourself `this.router.navigateByUrl('/profile;tags=one,two')` which will leave the URL as you passed it... It seems to have worked for me. — kubicle, Mar 24 '22 at 07:48

score 39 · Accepted Answer · answered Feb 02 '17 at 06:37

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.

Instead of calling DefautlUrlSerializer in both methods, will extending DefautlUrlSerializer work? I feel that will be a cleaner and simpler approach. — Md Enzam Hossain, Jun 14 '17 at 21:04
@EnzamHossain Yes, we can go for the cleaner approach by creating a single instance and using it across. — jigar gala, Jun 15 '17 at 12:07
Hi @jigargala when we use this in the module @NgModule({ providers: [{ provide: UrlSerializer, useClass: CustomUrlSerializer }] }) so, this will override the defaultUrlSerializer in the router right? Correct me if i am wrong. — sarath19, Sep 19 '17 at 12:41
@jigargala I have used CustomUrlSerializer like this to replace space with + in url , but I am getting 404 error on page refresh when uploaded my angular application in IIS, in localhost it is working fine.This is happening only if space is there in url.Can you please provide any solution on this? — Darshana, Aug 15 '20 at 09:40

score 0 · Answer 2 · answered Mar 14 '23 at 20:01

0

Try:

this.router.navigateByUrl(url) // replace 'url' with whatever you'd like.

Note, this excepts a string, so unlike 'this.router.navigate', you don't use the [] brackets.

answered Mar 14 '23 at 20:01

Scott-MEARN-Developer

114
10

score -2 · Answer 3 · answered Jan 05 '17 at 02:47

The url looks like this:

http://localhost:4200/profile;tags=one%2Ctwo

But it won't bring any problem when you consume it. If you, for the 'profile' route, set up a 'canActive' guard with code like following:

  canActivate(route: ActivatedRouteSnapshot) {
    console.log(route.params);}

And when you navigating to http://localhost:4200/profile;tags=one%2Ctwo, you will see {tag: one, two} in the console. So when you consume it, it is 'one, two'. And of course, you can copy this encoded url and send to others to use.

Hi, I appreciate that it functions without any problems, I was trying to find a solution that makes the url pretty or appealing to read. — Jason, Jan 05 '17 at 08:15

angular 2 disable url encoding

3 Answers3

Linked