Problema com Smooth Scroll

Galera, na minha aplicação acabei criando uma one page onde possuo a pagina principal e outras rotas da aplicação, por exemplo: HOME (principal), Como funciona (Mesma pagina da HOME), FAQ (outra pagina/rota). Criei um método de Smooth Scroll no componente NAV, dessa forma:

  scrollToElement($element: any): void {
    const el = document.getElementById($element);
    el.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' });
  }

Porém, ao entrar na FAQ que seria outra rota, e clicar no menu que possui os eventos de scrollToElement, ele estoura um erro

NavbarComponent.html:9 ERROR TypeError: Cannot read property 'scrollIntoView' of null
    at NavbarComponent.scrollToElement (navbar.component.ts:30)
    at Object.eval [as handleEvent] (NavbarComponent.html:9)
    at handleEvent (core.js:43993)
    at callWithDebugContext (core.js:45632)
    at Object.debugHandleEvent [as handleEvent] (core.js:45247)
    at dispatchEvent (core.js:29804)
    at core.js:42925
    at HTMLAnchorElement.<anonymous> (platform-browser.js:2668)
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:39680)

Já pesquisei e não acho nenhuma solução valida.

Meu Html do component Nav:

<nav>
  <div class="nav-wrapper">
    <!-- Logo -->
    <a [routerLink]="['/home']" class="brand-logo"><img src="./assets/images/logo.png"></a>
    <!-- Fim do logo -->

    <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
    <ul id="nav-mobile" class="right hide-on-med-and-down">
      <li><a [routerLink]="['/home']" (click)="scrollToElement('quemSomos')">Quem somos</a></li>
      <li><a [routerLink]="['/solicitaremprestimo']">Solicitar empréstimo</a></li>
      <li><a [routerLink]="['/faq']">FAQ</a></li>
      <li><a [routerLink]="['/home']" (click)="scrollToElement('comoFunciona')">Como funciona</a></li>
      <li><a [routerLink]="['/home']" (click)="scrollToElement('contato')">Contato</a></li>
    </ul>
  </div>
  <a id="area-cliente" class="hide-on-med-and-down" [routerLink]="['/login']" target="_blank">Área do cliente</a>
</nav>

<ul class="sidenav" id="mobile-demo">
  <li><a (click)="scrollToElement('quemSomos')">Quem somos</a></li>
  <li><a routerLinkActive="active" [routerLink]="['/solicitaremprestimo']">Solicitar empréstimo</a></li>
  <li><a routerLinkActive="active" [routerLink]="['/faq']">FAQ</a></li>
  <li><a [routerLink]="['/home']" (click)="scrollToElement('comoFunciona')">Vídeos</a></li>
  <li><a #contatos>Contato</a></li>
  <li><a [routerLink]="['/home']" (click)="scrollToElement('contato')">Área do cliente</a></li>
</ul>