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?

Answer 1

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.