ActivatedRoute.queryParams не определен после обновления экрана в Angular 5

Пожалуйста помоги!

Итак, у меня есть следующий URL

https://xxx.io/#/route1/yyyyyyyy?tj=3&bd=7

И когда я перехожу к нему, у меня появляется следующий код:

this.route.queryParams.subscribe((res: any) => {
        console.info('tj: ' + res.tj)
        console.info('bd: ' + res.bd)

Теперь это печатает то, что я ожидал, а именно tj: 3 и bd: 7.

Но когда я обновляю экран, res.tj и res.bd не определены. Как это может быть?

Первоначально это происходило, потому что я заметил, что URL-адрес, когда я обновил экран, изменился на:

https://xxx.io/#/route1/yyyyyyyy%3D3&bd%3D7

Но это было из-за проблем с кодировкой URL-адресов, поэтому я добавил CustomUrlSerializer, например:

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

export class CustomUrlSerializer implements UrlSerializer {

  parse(url: string): UrlTree {
    const dus = new DefaultUrlSerializer();
    return dus.parse(url);
  }

  serialize(tree: UrlTree): any {
      const dus = new DefaultUrlSerializer();
      let path = dus.serialize(tree);
      return path.replace("%3F", "?").replace(/%3D/g, " = ");
  }
}

И это устранило эту проблему, поэтому URL-адрес снова верен после обновления:

https://xxx.io/#/route1/yyyyyyyy?tj=3&bd=7

Но res.tj и ts.bd все еще не определены !!!

Застряли на этом в течение нескольких часов, поэтому надеемся, что кто-то сможет пролить свет на то, почему это происходит и как я могу это исправить?

Спасибо!