Как предотвратить перезагрузку страницы/скроллинг в самый верх при клике на routerLink

У меня есть проект интернет-магазина на Angular, при клике на routerLink происходит переход на другой элемент роутера, при этом у меня присутствует анимация перехода. Данную анимацию увидеть невозможно, так как страничка сразу прокручивается наверх или перезагружается. Если нажать кнопку "назад" в браузере - анимацию видно. Как предотвратить данное поведение? Итак, что я пробовал: добавлять опцию

{ scrollPositionRestoration: 'disabled' } --- не помогает

Вот такой скрипт в конструктор

  router.events
  .pipe(filter((e: Event): e is Scroll => e instanceof Scroll))
  .subscribe((e) => {
    if (e.position) {
      // backward navigation
      viewportScroller.scrollToPosition(e.position);
    } else if (e.anchor) {
      // anchor navigation
      viewportScroller.scrollToAnchor(e.anchor);
    } else {
      // forward navigation
      viewportScroller.scrollToPosition([0, 0]);
    }
  });

// не помогает

Вот код моего раутера

const routes: Routes = [
  { path: '', redirectTo: '/products', pathMatch: 'full' },
  {
    path: 'products',
    component: ProductsComponent,
    data: { animation: 'isLeft' },
  },
  {
    path: 'shopping-cart',
    component: ShoppingCartComponent,
    data: { animation: 'isRight' },
  },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { scrollPositionRestoration: 'disabled' }),
  ],
  exports: [RouterModule],
})

Вот код оутлета

<main [@routeAnimations]="prepareRoute(outlet)" class="content">
  <router-outlet #outlet="outlet"></router-outlet>
</main>

Код айтема

<article class="product">
  <div class="img-container">
    <img src="{{ product.image }}" alt="product" class="product-img" />
    <button
      class="bag-btn"
      data-id="{{ product.id }}"
      routerLink="/shopping-cart"
      (click)="addItem(product.id)"
    >
      <i class="fas fa-shopping-cart"></i>
      Add to bag
    </button>
  </div>
  <h3>{{ product.name }}</h3>
  <h4>Price: ${{ product.price }}</h4>
  <p>{{ product.label }}</p>
</article>

Почему так происходит? Как предотвратить данное поведение? Как сделать так, чтобы при переходе на другой линк вся страница не перезагружалась, а окно прокрутки оставалось на том же месте?