Angular 2 - Implement UrlSerializer

Question

I'm trying to implement my own UrlSerializer class, this is what I did:

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

export class CustomUrlSerializer implements UrlSerializer {

    parse(url: string): UrlTree {
        // Change plus signs to encoded spaces
        url.replace("%20", '-');
        // Use the default serializer that you can import to just do the 
        // default parsing now that you have fixed the url.
        return super.parse(url)  
    }

    serialize(tree: UrlTree): string {
        // Use the default serializer to create a url and replace any spaces with + signs
        return super.serialize(tree).replace("%20", '-');
    }
}

When I'm trying to compile I get the following erros:

c:/xampp/htdocs/proj/src/app/custom-url-serializer.ts (11,12): 'super' can only be referenced in a derived class.
c:/xampp/htdocs/proj/src/app/custom-url-serializer.ts (16,12): 'super' can only be referenced in a derived class.

What's wrong?

Ján Halaša · Accepted Answer · 2017-04-13 19:57:04Z

10

I would say the problem is the implements keyword. Because it expect an interface, which has no implementation, so you cannot call super. The UrlSerializer is an abstract class, so you could use the DefaultUrlSerializer:

import { DefaultUrlSerializer, UrlTree } from '@angular/router';
class CustomUrlSerializer extends DefaultUrlSerializer {
    parse(url: string) : UrlTree {
        return super.parse(url);
    }
}
new CustomUrlSerializer().parse('http://stackoverflow.com');

It should work.

edited Apr 13, 2017 at 19:57

answered Apr 13, 2017 at 19:19

Ján Halaša

8,4961 gold badge40 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

TheUnreal Over a year ago

UrlSerializer is an abstract method, now I get an error that I can't use super. How I can access the default url serializer?

Ján Halaša Over a year ago

Ah, yes, that's true. You can use DefaultUrlSerializer angular.io/docs/ts/latest/api/router/index/…

TheUnreal Over a year ago

Thanks! But how I can import it to my custom class? there is no constructor for abstracts

Ján Halaša Over a year ago

I'm not sure what you exactly mean, but I edited my answer to include more code and the DefaultUrlSerializer. I tried that example and it worked well.

Marcel van der Drift Over a year ago

In case anyone is still wondering: you should add it to your root app module providers, e.g. @NgModule({ providers:[{provide: UrlSerializer, useClass: CustomUrlSerializer }, /*more providers*/], /*bootstrap etc*/ }) export class myApp { /*etc*/ }

Collectives™ on Stack Overflow

Angular 2 - Implement UrlSerializer

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related