Syntax error, unrecognized expression: /service-details/1139#overview Angular 5

Question

I am doing simple routing in angular. It is working fine but when I want client side routing means use of nav tabs to move in a same page then it is throwing an error. Here is my code :

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>

as per above code I can move in same page freely but this error occurs Syntax error, unrecognized expression: /service-details/1139#overview every time.

May be this is routing issue then how to fix it ?

Thank you in advance.

did u add path for routermodule https://stackblitz.com/edit/angular-dymkil?file=src%2Fapp%2Fapp.component.html — Sachila Ranawaka, Dec 21 '18 at 04:31
Yes but like this { path: 'service-details/:id', component: ServiceDetailsComponent }, — Aarsh, Dec 21 '18 at 04:52

score 2 · Accepted Answer · answered Dec 21 '18 at 05:16

2

You need to enable anchorScrolling option where you import RouterModule

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

More Info: https://medium.com/lacolaco-blog/introduce-router-scroller-in-angular-v6-1-ef34278461e9

answered Dec 21 '18 at 05:16

zmag

7,825
12
32
42

I am using angular 5 not 6 so it is not working in 5 @zmag – Aarsh Dec 21 '18 at 05:27
@Aarsh This might be helpful : [https://stackoverflow.com/a/44203337/3870547](https://stackoverflow.com/a/44203337/3870547) – zmag Dec 21 '18 at 05:32
Yahh I used that already but gives the same error in the end :-| – Aarsh Dec 21 '18 at 05:50

score 1 · Answer 2 · answered Dec 21 '18 at 05:12

1

have set {useHash: true} in routes definition

answered Dec 21 '18 at 05:12

Vikram Jangra

121
1
3

I can't because i have to use PathLocationStrategy can't use HashLocationStrategy – Aarsh Dec 21 '18 at 05:21
you can use fragment with # only in HashLocationStrategy – Vikram Jangra Dec 21 '18 at 05:38
Yes I know it worked very well but in this project we have to use pathlocationstrategy otherwise it was working when we were using HashLocationStrategy – Aarsh Dec 21 '18 at 05:43
can you explain what exactly you want to achieve with this so that i can find some other solution for you, as i understand if you have # in your path and have PathLocationStrategy then you will get the syntax error – Vikram Jangra Dec 21 '18 at 05:52
As I mention in que that I want to navigate in same page using anchor tabs without using hashlocationstrategy. Use # only on anchor tags where you want to navigate in same page other wise no # – Aarsh Dec 21 '18 at 05:54
"navigate in same page using anchor tabs" does it means that you want to reload the component or scrolling down to some other content in the page what exactly you want to do by navigating to same page prefer executing a function on click of anchor tag as fragment will not be allowed – Vikram Jangra Dec 21 '18 at 06:19
scrolling down to some other content in the page not reload the component – Aarsh Dec 21 '18 at 06:49

Syntax error, unrecognized expression: /service-details/1139#overview Angular 5

2 Answers2