Angular routerLink does not navigate to the corresponding component

Question

My routing in the angular2 apps works well. But I am going to make some routeLink based on this:

Here is my routing:

const routes: RouterConfig = [
    { path:'home' , component: FormComponent  },
    { path:'about', component: AboutComponent },
    { path:'**'   , component: FormComponent  }
];

And here are the links that I made:

<ul class="nav navbar-nav item">
  <li>
    <a routerLink='/home' routerLinkActive="active">Home</a>
  </li>
  <li>
    <a routerLink='/about' routerLinkActive="active">About this</a>
  </li>
</ul>

I expect that, when I click on them it navigates to the corresponding component, but they do not perform anything?

Can you please try `[routerLink]='[/home']`? What Angular2 version and router version are you using? — Günter Zöchbauer, Aug 08 '16 at 15:15
it doesn't work. are u sure with the place of your qutations?? I think i am using the last version of angular2, but i don't know how to check it. I generated it with **ng new**. and it should be updated — Jeff, Aug 08 '16 at 15:25
Maybe you forgot to add `directives: [ROUTER_DIRECTIVES],` to your component's metadata. Without that, Angular won't know to parse the `routerLink`s. — Mark Rajcok, Aug 08 '16 at 22:21
Possible duplicate of [Angular2 Router link not working](http://stackoverflow.com/questions/40552619/angular2-router-link-not-working) — isherwood, Apr 19 '17 at 20:11
In my case, I was doing everything correctly but I've looped through li inside another li, and only outter li's routerlink was getting clicked. — Charitha Goonewardena, Jun 06 '21 at 14:05

score 476 · Accepted Answer · edited Mar 07 '18 at 20:29

476

The code you are showing there is absolutely correct.

I suspect that your problem is that you are not importing RouterModule (which is where RouterLink is declared) into the module which uses this template.

I had a similar problem and it took me some time to solve as this step is not mentioned in the documentation.

So go to the module that declares the component with this template and add:

import { RouterModule } from '@angular/router';

then add it to your modules imports e.g.

@NgModule({
  imports: [
    CommonModule,
    RouterModule
  ],
  declarations: [MyTemplatesComponent]
})
export class MyTemplatesModule { }

Along with having the correct import statements, you'll also need a place for that routerLink to be shown, which is in the <router-outlet></router-outlet> element, so that also needs to be placed somewhere in your HTML markup so the router knows where to display that data.

edited Mar 07 '18 at 20:29

john_h

149
1
18

answered Nov 18 '16 at 13:56

Sam Redway

7,605
2
27
41

1

I thought so and yes - you are absolutely right in my case too! – Dhananjay Mar 23 '18 at 20:26
1

Adding the Router module to my imports did the trick, thanks! – ENDEESA Mar 20 '19 at 20:33
1

Nothing helps in my case. I have this problem in custom `HttpErrorComponent` which displays error information. So for instance if my page is not loaded because of Permission guard and just displays error 403 - the home button with `routerLink` on this page does not work (not clickable). – Alexander Jul 05 '21 at 18:50
had this issue with a lazy loaded module importing a shared module (was refactoring). this fixed it, thanks – Ric Jan 04 '23 at 09:56

score 29 · Answer 2 · edited May 11 '17 at 17:22

29

don't forget this to add this below in your template:

<router-outlet></router-outlet>

edited May 11 '17 at 17:22

Thomas Ayoub

29,063
15
95
142

answered May 11 '17 at 17:21

zai

291
3
2

score 16 · Answer 3 · edited Apr 19 '17 at 20:13

16

Try changing the links as below:

  <ul class="nav navbar-nav item">
    <li>
        <a [routerLink]="['/home']" routerLinkActive="active">Home</a>
    </li>
    <li>
        <a [routerLink]="['/about']" routerLinkActive="active">About this</a>
    </li>
  </ul>

Also, add the following in the header of index.html:

<base href="/">

edited Apr 19 '17 at 20:13

isherwood

58,414
16
114
157

answered Nov 18 '16 at 21:44

raj_just123

318
2
5

score 9 · Answer 4 · answered Aug 08 '16 at 15:15

9

use it like this for mroe info read this topic

<a [routerLink]="['/about']">About this</a>

answered Aug 08 '16 at 15:15

rashfmnb

9,959
4
33
44

7

According to your link, his `routerLink` should work ;-) – Günter Zöchbauer Aug 08 '16 at 15:26
This works for `"@angular/router": "~3.4.0"` . Cheers! – mikeym Dec 27 '16 at 07:15
2

Yes, the bracket notation works (and is valid syntax with as specific purpose), but it's not a solution to this question. – isherwood Apr 19 '17 at 20:13

score 7 · Answer 5 · answered Dec 31 '19 at 10:59

For anyone having this error after spliting modules check your routes, the following happened to me:

public-routing.module.ts:

const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: '**', redirectTo: 'home' } // ← This was my mistake
    { path: 'home', component: HomeComponent },
    { path: 'privacy-policy', component: PrivacyPolicyComponent },
    { path: 'credits', component: CreditsComponent },
    { path: 'contact', component: ContactComponent },
    { path: 'news', component: NewsComponent },
    { path: 'presentation', component: PresentationComponent }
]

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class PublicRoutingModule { }

app-routing.module.ts:

const routes: Routes = [
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

Move { path: '**', redirectTo: 'home' } to your AppRoutingModule:

public-routing.module.ts:

const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'home', component: HomeComponent },
    { path: 'privacy-policy', component: PrivacyPolicyComponent },
    { path: 'credits', component: CreditsComponent },
    { path: 'contact', component: ContactComponent },
    { path: 'news', component: NewsComponent },
    { path: 'presentation', component: PresentationComponent }
]

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class PublicRoutingModule { }

app-routing.module.ts:

const routes: Routes = [
    { path: '**', redirectTo: 'home' }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

I am no sured, but in your case may be the order of defined routes. The wildcards ("**") match all possible cases so the following routing definitions are ignored? — Jesus M C, May 25 '22 at 08:59

score 5 · Answer 6 · answered Sep 29 '19 at 03:30

5

I was using routerlink instead of routerLink.

answered Sep 29 '19 at 03:30

sham

691
8
28

1

I made this mistake and this fixed it! I also have no idea why you were downvoted (perhaps because this could have been a comment instead or because it doesn't directly answer this specific question?). Would be nice if people who downvote it could provide a reason why. – JoniVR Apr 22 '20 at 08:27

score 5 · Answer 7 · answered Dec 09 '19 at 05:14

I'm aware this question is fairly old by now, and you've most likely fixed it by now, but I'd like to post here as reference for anyone that finds this post while troubleshooting this issue is that this sort of thing won't work if your Anchor tags are in the Index.html. It needs to be in one of the components

score 3 · Answer 8 · edited Aug 08 '16 at 22:17

3

The links are wrong, you have to do this:

<ul class="nav navbar-nav item">
    <li>
        <a [routerLink]="['/home']" routerLinkActive="active">Home</a>
    </li>
    <li>
        <a [routerLink]="['/about']" routerLinkActive="active">About this
        </a>
    </li>
</ul>

You can read this tutorial

edited Aug 08 '16 at 22:17

Mark Rajcok

362,217
114
495
492

answered Aug 08 '16 at 15:28

Fernando Del Olmo

1,440
17
32

1

Bracket notation serves a different purpose and does not solve this problem. – isherwood Apr 19 '17 at 20:14
this was it! Home I was following the tutorial which had me put the routerLinkActive in the < li > tag. when I placed it in the < a tag it now works! Many thanks!!!! this is excellent! – Rich P Nov 21 '17 at 18:30
BTW, I do have all the other tags/suggested elements in place already. Now this feature works (sort of). I have to follow the rest of the tutorial because I notice that when I select other rows, even though the value for the selected row is being passed (I see it in the url) only the first row is being rendered. But that will be another topic. Many thanks again for this great help. – Rich P Nov 21 '17 at 18:36
I don't know why, but when I put Bracket, it worked for me, and I didn't import RouterModule in my app module.. – Cegone Dec 10 '19 at 06:44

score 1 · Answer 9 · answered Jan 27 '20 at 14:28

There is also another case which suits this situation. If in your interceptor, you made it return non Boolean value, the end result is like that.

For example, I had tried to return obj && obj[key] stuff. After debugging for a while, then I realize I have to convert this to Boolean type manually like Boolean(obj && obj[key]) in order to let the clicking pass.

score 1 · Answer 10 · answered Apr 06 '20 at 23:37

1

Following the working sample, I have figured out solution for the case of pure component:

answered Apr 06 '20 at 23:37

Seeliang

2,321
1
13
18

score 1 · Answer 11 · answered May 14 '20 at 00:28

1

For not very sharp eyes like mine, I had href instead of routerLink, took me a few searches to figure that out #facepalm.

answered May 14 '20 at 00:28

Aragorn

5,021
5
26
37

score 1 · Answer 12 · edited Aug 23 '20 at 14:27

1

Most of the time problem is a spelling mistake in

<a [routerLink]="['/home']" routerLinkActive="active">Home</a>

Just check again for spelling.

edited Aug 23 '20 at 14:27

anastaciu

23,467
7
28
53

answered Aug 23 '20 at 13:36

Puja Zagade

11
1

score 1 · Answer 13 · answered Sep 25 '20 at 15:30

If you have your navbar inside a component and you declared your style active in that stylesheet, it won't work. In my case this was the problem.

my item of my navbar using angular material was:

<div class="nav-item">
        <a routerLink="/test" routerLinkActive="active">
          <mat-icon>monetization_on</mat-icon>My link
        </a>
<mat-divider class="nav-divider" [vertical]="true"></mat-divider>

so I put the style active in my style.scss in the root

a.active {
  color: white !important;
  mat-icon {
    color: white !important;
  }
}

I hope it helps you if the other solutions didn't.

score 1 · Answer 14 · answered Nov 27 '20 at 12:54

1

In my case I had line-wrapper in my VS code and, apparently, there was no space between end of closing quote belonging to [routerLink] and next attribute. Line-wrapper split this in two lines so missing space went unnoticed.

answered Nov 27 '20 at 12:54

Zoryana Tischenko

81
1
2

score 0 · Answer 15 · edited Aug 09 '22 at 15:00

0

I was able to solve my problem by moving my navigation links from Index page to component (I actually had added template in index.html)

edited Aug 09 '22 at 15:00

Leniel Maccaferri

100,159
46
371
480

answered Oct 17 '21 at 13:18

SAJID BHAT

11
3

score 0 · Answer 16 · answered Jul 25 '22 at 14:10

0

Incase you're following https://angular.io/start/start-routing tutorial while using https://stackblitz.com/ as online IDE, opening/refreshing it in an new window fixed it.

answered Jul 25 '22 at 14:10

Arbrim Rashiti

43
5

score 0 · Answer 17 · answered Dec 14 '22 at 04:03

Try adding the components you have created in the declarations array in the 'app.module.ts' or the respective module file so that your module knows that you have created these components. Also don't forget to import CommonModule and RouterModule.

import {AboutComponent} from './about.component';
import {FormComponent} from './form.component';

@NgModule({
  imports: [
    CommonModule,
    RouterModule
  ],
  declarations: [FormComponent, AboutComponent]
})
export class MyTemplatesModule { }

Angular routerLink does not navigate to the corresponding component

17 Answers17

Linked