Синтаксическая ошибка, нераспознанное выражение: / service-details / 1139 # обзор Angular 5

Question

Я делаю простую маршрутизацию в угловых.Это работает нормально, но когда я хочу, чтобы маршрутизация на стороне клиента означала использование навигационных вкладок для перемещения на одной и той же странице, это вызывает ошибку.Вот мой код:

service-detail.component.html

 <ul class="asidemenu">
          <li><a [routerLink]="['/service-details',serviceId]" fragment="overview" (click)="onAnchorClick()" class="
              active"><span
                class="asidemenu-icon"><img src="assets/images/binoculars.svg" alt=""></span><span class="asidemenu-title">Overview</span></a></li>
          <li><a [routerLink]="['/service-details',serviceId]" fragment="review-analytics" (click)="onAnchorClick()"><span
                class="asidemenu-icon"><img src="assets/images/graph-analysis.svg" alt=""></span><span class="asidemenu-title">Sentiment</span></a></li>
          <li><a [routerLink]="['/service-details',serviceId]" fragment="expert-review" (click)="onAnchorClick()"><span
                class="asidemenu-icon"><img src="assets/images/review.svg" alt=""></span><span class="asidemenu-title">Expert
                Reviews</span></a></li>
    <ul>

<div id='overview'> Overview (Removed Original content)</div>
<div id='review-analytics'> Reviews (Removed Original content)</div>
<div id='expert-review'> Expert Reviews (Removed Original content)</div>

в соответствии с приведенным выше кодом, я могу свободно перемещаться на той же странице, но эта ошибка возникает Syntax error, unrecognized expression: /service-details/1139#overview каждый раз.

Может быть, это проблема маршрутизации, тогда как ее исправить?

Заранее спасибо.

Answer 1

Вам необходимо включить опцию anchorScrolling, когда вы импортируете RouterModule

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      anchorScrolling: 'enabled',
    })
  ],
})
...

Дополнительная информация: https://medium.com/lacolaco-blog/introduce-router-scroller-in-angular-v6-1-ef34278461e9

Answer 2

установили {useHash: true} в определении маршрутов