pageScrollService other route - Scrolling not possible, as we can't find the specified target router

[offirpeer]

pageScroll directive stopped from working after we changed to SSR so I am using the service at the moment. Everything works great except for page scrolling to id in other view using router-link, it used to work with the directive but now it doesn't.

<button class="st-root-link nav-link" appScrollToView [routerLink]="['/']" [id]="'id-in-other-route'">

This is my directive like so:

@Directive({
  selector: '[appScrollToView]'
})
export class ScrollToViewDirective {
  @Input()
  public id: string; // the id of the element to navigate when this element being clicked
  public scrollDelay = 0;

  constructor(private readonly pageScrollerService: PageScrollerService) { }

  @HostListener('click')
  public click() {
    this.pageScrollerService.scroll(this.id);
  }
}

This is the service it's calling:

@Injectable({
  providedIn: 'root'
})
export class PageScrollerService {

  constructor(@Inject(DOCUMENT) private document: any,
  private readonly pageScrollService: PageScrollService) { }

  public scroll(id: string): void {
    this.pageScrollService.scroll({
      document: this.document,
      scrollTarget: '#' + id
    });
  }
}

Html: <button class="st-root-link nav-link" appScrollToView [routerLink]="['/']" [id]="'no-more-paper'">