Template parse errors: Can't bind to 'routerLink' since it isn't a known property of 'a'

Question

I am creating a component then it's set to root component then i am getting error Template parse errors: Can't bind to 'routerLink' since it isn't a known property of 'a'. i have using RouterLink as a directive in component anotation but it can't work.

app.routes.ts

import { ModuleWithProviders }  from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { dogRoutes }    from './Dogs/dog.routes';
import { catRoutes }    from './Cats/cat.routes';
import {userRoutes} from "./Users/user.routes";
// Route Configuration
export const routes: Routes = [
  {
    path: '',
    redirectTo: '/dogs',
    pathMatch: 'full'
  },
  ...catRoutes,
  ...dogRoutes,
  ...userRoutes
];

export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <div class="demo-layout-transparent mdl-layout mdl-js-layout">
  <header class="mdl-layout__header mdl-layout__header--transparent">
    <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title">Scotch Pets</span>
      <!-- Add spacer, to align navigation to the right -->
      <div class="mdl-layout-spacer"></div>
      <!-- Navigation with router directives-->
      <nav class="mdl-navigation">
        <a class="mdl-navigation__link" [routerLink]="['/']">Home</a>
        <a class="mdl-navigation__link" [routerLink]="['/cats']">Cats</a>
        <a class="mdl-navigation__link" [routerLink]="['/dogs']">Dogs</a>
        <a class="mdl-navigation__link" [routerLink]="['/login']">Login</a>
      </nav>
    </div>
  </header>
  <main class="mdl-layout__content">
    <h1 class="header-text">We care about pets...</h1>
  </main>
</div>
<!-- Router Outlet -->
<div class="container">
  <router-outlet></router-outlet>
    </div>
  `,

})

export class AppComponent{}

app.module.ts

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

import { AppComponent }         from './app.component';
import { DogsModule } from './Dogs/dogs.module';
import { CatsModule } from './Cats/cats.module';
import { UserModule }          from './Users/users.module';
import {routing} from './app.routes';
import {RouterModule} from "@angular/router";


@NgModule({
  imports: [
    BrowserModule,
FormsModule,
 HttpModule,
RouterModule,
JsonpModule,
UserModule,
DogsModule,
CatsModule,
routing
 ],
 declarations: [
  AppComponent,
 ],
 providers: [   ],
  bootstrap: [ AppComponent ]
})

export class AppModule {}

dog-list.component.ts

 import {Component, OnInit} from '@angular/core';
import {PetService} from '../services/pet.service'
import {Observable} from 'rxjs/Observable';
import {Pet} from '../model/pet';
import {AuthenticationService} from "../../Users/services/authentication.service";


@Component({

  template: `
    <h2>Dogs</h2>
    <p>List of dogs</p>
    <ul class="demo-list-icon mdl-list">
      <li class="mdl-list__item" *ngFor="let dog of dogs | async">
        <span class="mdl-list__item-primary-content">
            <i class="material-icons mdl-list__item-icon">pets</i>
            <a [routerLink]="['/dogs', dog.id.$t]">{{dog.name.$t}}</a>
        </span>
      </li>
    </ul>
    `
})
// Component class implementing OnInit
export class DogListComponent implements OnInit {
  // Private property for binding
  dogs: Observable<Pet[]>;

  constructor(private petService: PetService, private _service: AuthenticationService) {

  }

  // Load data ones componet is ready
  ngOnInit() {
    this._service.checkCredentials();
    // Pass retreived pets to the property
    this.dogs = this.petService.findPets('dog');
    alert(JSON.stringify(this.dogs))
  }
}

Is there a better way for me to add fix this error?

You need to add the `RouterModule` to `imports: []` of every module where you use router directives like `RouterOutlet` or `routerLink`. — Günter Zöchbauer, Dec 21 '16 at 19:45
Thanks buddy i have added `RouterModule` at DogsModule to ` imports:[]` section and its work — Prashant Jangid, Dec 22 '16 at 06:56
Seems Vikash suggested that before me already in the comments below his answer. Feel free to keep his answer accepted and perhaps ask him to update his answer. — Günter Zöchbauer, Dec 22 '16 at 07:02

score 12 · Accepted Answer · answered Dec 22 '16 at 06:57

12

You need to add the RouterModule to imports: [] of every module where you use router directives like RouterOutlet or routerLink-

answered Dec 22 '16 at 06:57

Günter Zöchbauer

623,577
216
2,003
1,567

Thanks. It works for @angular/router with version 3.3.1 that I use. – Dmytro K. Jan 29 '17 at 21:33
@Gunter: what if I don't want to include it to every child module, is there any other alternative to angular 5? – Shubham Tiwari Sep 12 '18 at 04:40
I don't think so, but I also don't see why this would be a problem. Angular in general does't compromise much when deliverable size or execution efficiency is at state, and this is what modules are about. – Günter Zöchbauer Sep 12 '18 at 04:43

score 4 · Answer 2 · edited Dec 22 '16 at 07:39

4

you have to import router in component in order to use routerLink.

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

You need to add the RouterModule to imports: [] of every module where you use router directives like RouterOutlet or routerLink.

edited Dec 22 '16 at 07:39

Prashant Jangid

135
1
1
11

answered Dec 21 '16 at 17:36

Vikash Dahiya

5,741
3
17
24

Error: Template parse errors: Can't bind to 'routerLink' since it isn't a known property of 'a'. ("content"> ][routerLink]="['/dogs', dog.id.$t]">{{dog.name.$t}} "): DogListComponent@7:19 – Prashant Jangid Dec 21 '16 at 17:44
hi it's work when we added it to declaration section but when i have add it to DogsModule then DogsModule added to app.module then why is not working can you explain me – Prashant Jangid Dec 21 '16 at 18:19
you have to import RouterModule in DogsModule also then – Vikash Dahiya Dec 21 '16 at 18:24
thanks buddy i have to modified DogsModule accroding to ' Günter Zöchbauer ' way – Prashant Jangid Dec 22 '16 at 06:58

Splaktar · Answer 3 · 2017-01-10T07:02:57.120

3

I ran into this with an Angular Material2 ("2.0.0-alpha.9-3",) md-nav-list:

<md-nav-list>
  <md-list-item>
    <a [routerlink]="['']">
      <md-icon md-list-avatar>home</md-icon>
      <span>Home</span>
    </a>
  </md-list-item>
</md-nav-list>

Throws Can't bind to 'routerlink' since it isn't a known property of 'a'.

<md-nav-list>
  <md-list-item>
    <a [routerLink]="['']">
      <md-icon md-list-avatar>home</md-icon>
      <span>Home</span>
    </a>
  </md-list-item>
</md-nav-list>

Works fine. Note that only the case of routerlink vs routerLink is different. In my case, IntelliJ automatically converted to the all lowercase version automatically... ugh!

edited Jan 10 '17 at 07:02

answered Jan 10 '17 at 06:33

Splaktar

5,506
5
43
74

That doesn't seem to make much sense. In the 2nd example you create a `routerlink` attribute with the text `['']`. If you want a router link then it should be `routerLink` instead of `routerlink` and either `routerLink="/some/path"` or `[routerLink]="['/some', 'path']"`, but not `routerLink="[...]"`, that's just wrong. – Günter Zöchbauer Jan 10 '17 at 06:36
1

Ugh! IntelliJ keeps changing the case of things like `routerLink` and `ngIf` to `routerlink` and `ngif`! Good catch, thanks. – Splaktar Jan 10 '17 at 07:00
Answer updated to be correct now. If you typo the name or have IntelliJ change it to all lowercase, then you will get a similar error. Oh and `[routerLink]="['']"` goes to `/` i.e. home page. – Splaktar Jan 10 '17 at 07:03

Template parse errors: Can't bind to 'routerLink' since it isn't a known property of 'a'

3 Answers3

Linked