0

I have an angular project where I want to link to bookmarks on other pages. So in my html I have links like this: 

<a href="#products" routerLink="overview">products</a>

but when the page compiles and runs, I see that this link gets rewritten to something like: 

<a _ngcontent-kfm-c5="" href="/overview/overview" routerlink="overview" ng-reflect-router-link="overview">products</a>

with the obvious effect of the link not working.

In app-router.module.ts the routes are defined as

  { path: 'main', component: MainComponent },
  { path: 'overview', component: OverviewComponent },
  { path: '', redirectTo: '/main', pathMatch: 'full' },
  { path: '**', component: MainComponent }

which used to work fine.

Is this expected behaviour? Am I missing something? I have older projects that use similar links that work fine. Or is this an angular-router bug? My angular-core is 7.2.0 and my angular router is 7.2.15. Any pointers are greatly appreciated as I'm stuck debugging this.

kjoetools
  • 528
  • 1
  • 6
  • 12

1 Answers1

1

In Single Page Application (SPA), routerLink will load the component into router-outlet without reloading/refreshing the page. On the other hand, clicking on a href link will refresh/reload the whole application or reset the application back to the start (state will get reset).

you should not use both at the same time, they will not work correctly.

María Cristina Fernández López
  • 417
  • 2
  • 9
  • 29
  • you're right. i agree when it comes to page browsing you shouldn't use both. probably why the routerlink rewrites the href (not correctly but still). But maybe it's a feature request to not rewrite when it's pointing to a bookmark.. I fixed this by writing the link as which works nicely. – kjoetools May 17 '19 at 08:07