routerlink not working in angular2

Question

I have checked all the tutorial and didn't find, what i am doing wrong.

AppModule :

 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';

 import { AppComponent } from './app.component';
 import {BlogComponent} from './blog/blog.component';
 import { PortfolioComponent } from './portfolio/portfolio.component';
 import { NavbarComponent } from './shared/navbar/navbar.component';
 import {TimelineComponent} from './timeline/timeline.component';
 import {HomeComponent} from './home/home.component';

 import { routing} from './app.routing';

 @NgModule({
   declarations: [
     AppComponent,
     PortfolioComponent,
     NavbarComponent,
     BlogComponent,
     TimelineComponent,
     HomeComponent
   ],
   imports: [
     BrowserModule,
     FormsModule,
     HttpModule,
     routing
   ],
   providers: [],
   bootstrap: [
     AppComponent
   ]
 })
 export class AppModule { }
 </i>

 Navigation Bar 
 <i>
 <div id="navbar" class="collapse navbar-collapse">
       <ul class="nav navbar-nav">
         <li><a routerlink="/portfolio">Portfolio</a></li>
         <li><a routerlink="/timeline">Timeline</a></li>
         <li><a routerlink="/blog">Blog</a></li>
       </ul>
       <ul class="nav navbar-nav navbar-right">
         <li><a href="#contact">Professionals</a></li>
         <li><a href="#contact">Students</a></li>
       </ul>
     </div>
 </i>

 NGModule :
 <i>
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 i

 import { routing} from './app.routing';

 @NgModule({

   imports: [
     BrowserModule,
     FormsModule,
     HttpModule,
     routing
   ],
   providers: [],
   bootstrap: [
     AppComponent
   ]
 })

Please check above code, anf please help me to find why routerlink is not wokring.

What's the error ? Where are your routes ? – Milad Dec 27 '16 at 22:35 — Milad, Dec 27 '16 at 22:35

score 2 · Answer 1 · answered Dec 27 '16 at 22:58

Not sure the code you pasted is ordered correctly but I can see 2 mistakes.

First, you're setting the routerlink attribute instead of routerLink, notice it's case sensitive.

Second, I'm pretty sure you don't import RouterModule in the module with the relevant component, make sure you do that so you get access to the routerLink directive in the first place.

score 2 · Answer 2 · answered Feb 16 '17 at 09:45

The code you are showing is correct.

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

in the module that declares the component with this template add:

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

then add it to your modules imports e.g.

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

score 0 · Answer 3 · answered Jun 11 '17 at 11:55

0

the anchor tag with the routerLink must be in the same place as de tag router-outlet

answered Jun 11 '17 at 11:55

hoheckell

15
4

routerlink not working in angular2

3 Answers3

Linked