How to use the Urlserialize

I create a class.ts with this code

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 {
      const dus = new DefaultUrlSerializer();
      return dus.serialize(tree);
    }

}

and then I call it in the app.module.ts

asi

import {CustomUrlSerializer} from './models/CustomUrlSerializer';

@NgModule({
providers: [DataService, XMLSerializer , CustomUrlSerializer],
}]

but nothing happens, what am I doing wrong,

I want to change my url of this link

to this link