custom-viewport-definition.ts

...

@Component(
{
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent implements AfterViewInit {
  ...
  
  @ViewChild("mainContent")
  private mainContentElement!: ElementRef<HTMLElement>;
  
  ...

  constructor(
    ...
    @Inject(ROUTER_SCROLL_SERVICE)
    private readonly routerScrollService: RouterScrollService,
    ...
  ) { ... }
  
  ...

  ngAfterViewInit() {
    if (this.mainContentElement) {
      this.routerScrollService.setCustomViewportToScroll(this.mainContentElement.nativeElement);
    } else {
      this.logger.error(
        "The main content element could not be found. Was it renamed? It is required here to ensure that scrolling works as expected!",
      );
    }
  }
}