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   lt ul class  quot nav navbar-nav item quot  gt     lt li gt       lt a routerLink   home  routerLinkActive  quot active quot  gt Home lt  a gt     lt  li gt     lt li gt       lt a routerLink   about  routerLinkActive  quot active quot  gt About this lt  a gt     lt  li gt   lt  ul gt   I expect that  when I click on them it navigates to the corresponding component  but they do not perform anything

User · Answer

The links are wrong  you have to do this    lt ul class  nav navbar-nav item  gt       lt li gt           lt a  routerLink      home    routerLinkActive  active  gt Home lt  a gt       lt  li gt       lt li gt           lt a  routerLink      about    routerLinkActive  active  gt About this          lt  a gt       lt  li gt   lt  ul gt    You can read this tutorial

User · Answer

I was using routerlink instead of routerLink

User · Answer

Most of the time problem is a spelling mistake in  lt a  routerLink   quot    home   quot  routerLinkActive  quot active quot  gt Home lt  a gt   Just check again for spelling

User · Answer

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  lt router-outlet gt  lt  router-outlet gt  element  so that also needs to be placed somewhere in your HTML markup so the router knows where to display that data

User · Answer

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

User · Answer

don t forget this to add this below in your template    lt router-outlet gt  lt  router-outlet gt

User · Answer

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  amp  amp  obj key  stuff  After debugging for a while  then I realize I have to convert this to Boolean type manually like Boolean obj  amp  amp  obj key   in order to let the clicking pass

User · Answer

use it like this for mroe info read this topic   lt a  routerLink      about    gt About this lt  a gt

User · Answer

Try changing the links as below      lt ul class  nav navbar-nav item  gt       lt li gt           lt a  routerLink      home    routerLinkActive  active  gt Home lt  a gt       lt  li gt       lt li gt           lt a  routerLink      about    routerLinkActive  active  gt About this lt  a gt       lt  li gt     lt  ul gt    Also  add the following in the header of index html    lt base href     gt

User · Answer

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

User · Answer

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   lt div class  quot nav-item quot  gt           lt a routerLink  quot  test quot  routerLinkActive  quot active quot  gt             lt mat-icon gt monetization on lt  mat-icon gt My link          lt  a gt   lt mat-divider class  quot nav-divider quot   vertical   quot true quot  gt  lt  mat-divider gt   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

User · Answer

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

User · Answer

Following the working sample  I have figured out solution for the case of pure component    Declare component at app level Do not init in component

User · Answer

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

[angular] Angular routerLink does not navigate to the corresponding component

Examples related to angular

Examples related to angular2-routing