CODEWITHSUNDEEP
angularangular-ui-routerhrefrouterlink
kjoetools
kjoetools

Reputation: 548

routerLink rewrites href

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.

Upvotes: 0

Views: 753

Answers (1)

Mar&#237;a Cristina Fern&#225;ndez L&#243;pez
Mar&#237;a Cristina Fern&#225;ndez L&#243;pez

Reputation: 437

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.

Upvotes: 1

Related Questions