0

When I bind queryParams using routerLink in Angular2, I am getting this error:

[ERROR] Exception while trying to serialize the value

This error is shown when I inspect the DOM. The links simply do not show at all on the page, so this was my only way of debugging since there were no errors in the console either.

screenshot of DOM

Component Code

export class FormatUrlLinkComponent implements OnInit {
  @Input('url') apiUrl: string;
  @Input('text') linkText: string;
  validUrl: {
    url: string,
    query: object
  } = {
    url: '',
    query: {}
  };

  constructor() { }

  ngOnInit() {
    // Format url into a valid url for routerLink
    this.validUrl = queryString.parseUrl(this.apiUrl);
    console.log(this.validUrl.query);
  }

}

Template Code

<a [routerLink]="validUrl.url" [queryParams]="validUrl.query"></a>

When I do a console.log(this.validUrl.query) I am seeing the following:

{Ntt: "welded"}

Am I doing something wrong here?

Haley Lohrenz
  • 11
  • 1
  • 1
  • What is `Params` defined as for `query: Params`? You define `url` as a `string` and `query` as type `Params`. Where did you create that `Params` type? – Narm Aug 14 '18 at 20:21
  • That error is detached from context. Error message tells me as much about your problem as current moon phase. – Antoniossss Aug 14 '18 at 20:47
  • Sorry `query` is of type `object`. I forgot to update this. It still produces the same error. That error is attached to the `[queryParams]` in the DOM when I inspect the page. Since it doesn't give me an error in the console, but it just simply doesn't show the links so this was my only way of debugging @Antoniossss – Haley Lohrenz Aug 15 '18 at 12:42

1 Answers1

0

For some odd reason, I solved it by doing this:

// Format url into a valid url for routerLink
const validUrl = queryString.parseUrl(this.apiUrl);
this.validUrl.url = validUrl.url;
this.validUrl.query = validUrl.query;

Not sure why I had to assign the value to a variable and then assign the two values from that variable to the one being used in the template, but this fixed it.

Haley Lohrenz
  • 11
  • 1
  • 1