CODEWITHSUNDEEP
angularangular2-routing
Jeff
Jeff

Reputation: 8431

Angular routerLink does not navigate to the corresponding component

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?

Upvotes: 203

Views: 269382

Answers (21)

Sam Redway
Sam Redway

Reputation: 8147

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.

(Or if you have a standalone component, maybe you are not importing into that component)

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 { }

Or if it's a stanalone component, import RouterModule directly to the component:

@Component({
    selector: 'component-name',
    standalone: true,
    imports: [
        RouterModule,
        ...

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.

Upvotes: 522

Md Shahriar
Md Shahriar

Reputation: 2786

I am using Angular 18 and after imports my app.component.ts file is:

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, RouterLink, RouterLinkActive],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'Demo';
}

Upvotes: 1

Abdur Rahman
Abdur Rahman

Reputation: 31

Add/Import the RouterLink in the Imports array in the component that is used the routerLink.

If u used routerLink in HomeComponent, then add the routerLink in the HomeComponents ts file

Upvotes: 1

Schnitzler
Schnitzler

Reputation: 350

For anyone else having this issue and using routerLink on a font awesome icon, double check in dev tools whether the compiler converts the i element into an svg. If yes, you will have to wrap your i element inside another element, and bind to routerLink over there.

<a [routerLink]="'/some-route'">
  <i class="fas fa-arrow-left fa-2x cursor-pointer"></i>
</a>

Upvotes: 0

PVG
PVG

Reputation: 852

If you are using standalone components, make sure to add the RouterLink, RouterLinkActive, and RouterOutlet to the imports array of Component.

See docs for more info

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, RouterLink, RouterLinkActive],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'routing-app';
}

Upvotes: 29

Sanjay K
Sanjay K

Reputation: 33

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 { }

Upvotes: 0

SAJID BHAT
SAJID BHAT

Reputation: 11

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)

Upvotes: 0

Arbrim Rashiti
Arbrim Rashiti

Reputation: 103

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.

Upvotes: 2

Zoryana Tischenko
Zoryana Tischenko

Reputation: 91

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.

Upvotes: 1

Javier
Javier

Reputation: 117

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.

Upvotes: 1

Puja Zagade
Puja Zagade

Reputation: 11

Most of the time problem is a spelling mistake in

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

Just check again for spelling.

Upvotes: 1

Aragorn
Aragorn

Reputation: 5289

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

Upvotes: 1

Seeliang
Seeliang

Reputation: 2949

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

  1. Declare component at app level
  2. Do not init in component

Upvotes: 1

Jiahua Zhang
Jiahua Zhang

Reputation: 571

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.

Upvotes: 1

Emeric
Emeric

Reputation: 6915

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 { }

Upvotes: 8

RandomGuy
RandomGuy

Reputation: 51

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

Upvotes: 5

sham
sham

Reputation: 769

I was using routerlink instead of routerLink.

Upvotes: 6

zai
zai

Reputation: 311

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

<router-outlet></router-outlet>

Upvotes: 31

raj_just123
raj_just123

Reputation: 318

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="/">

Upvotes: 16

Fernando Del Olmo
Fernando Del Olmo

Reputation: 1450

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

Upvotes: 3

rashfmnb
rashfmnb

Reputation: 10588

use it like this for mroe info read this topic

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

Upvotes: 9

Related Questions