Angular2 Exception Can t bind to routerLink since it isn t a known native property

Question

Obviously the beta for Angular2 is newer than new  so there s not much information out there  but I am trying to do what I think is some fairly basic routing    Hacking about with the quick-start code and other snippets from the https   angular io website has resulted in the following file structure   angular-testapp      app          app component ts         boot ts         routing-test component ts     index html   With the files being populated as follows   index html   lt html gt      lt head gt       lt base href     gt       lt title gt Angular 2 QuickStart lt  title gt       lt link href     css bootstrap css  rel  stylesheet  gt        lt  -- 1  Load libraries -- gt       lt script src  node modules angular2 bundles angular2-polyfills js  gt  lt  script gt       lt script src  node modules systemjs dist system src js  gt  lt  script gt       lt script src  node modules rxjs bundles Rx js  gt  lt  script gt       lt script src  node modules angular2 bundles angular2 dev js  gt  lt  script gt       lt script src  node modules angular2 bundles router dev js  gt  lt  script gt        lt  -- 2  Configure SystemJS -- gt       lt script gt        System config           packages                      app                format   register               defaultExtension   js                                        System import  app boot                then null  console error bind console         lt  script gt      lt  head gt      lt  -- 3  Display the application -- gt     lt body gt       lt my-app gt Loading    lt  my-app gt     lt  body gt    lt  html gt    boot ts  import  bootstrap     from  angular2 platform browser  import  ROUTER PROVIDERS  from  angular2 router    import  AppComponent  from    app component   bootstrap AppComponent        ROUTER PROVIDERS       app component ts  import  Component  from  angular2 core   import  RouteConfig  ROUTER DIRECTIVES  ROUTER PROVIDERS  LocationStrategy  HashLocationStrategy  from  angular2 router    import  RoutingTestComponent  from    routing-test component     Component       selector   my-app       template             lt h1 gt Component Router lt  h1 gt           lt a  routerLink     RoutingTest    gt Routing Test lt  a gt           lt router-outlet gt  lt  router-outlet gt                 RouteConfig        path   routing-test   name   RoutingTest   component  RoutingTestComponent  useAsDefault  true       export class AppComponent       routing-test component ts  import  Component  from  angular2 core   import  Router  from  angular2 router     Component       template             lt h2 gt Routing Test lt  h2 gt           lt p gt Interesting stuff goes here  lt  p gt               export class RoutingTestComponent       Attempting to run this code produces the error   EXCEPTION  Template parse errors  Can t bind to  routerLink  since it isn t a known native property             lt h1 gt Component Router lt  h1 gt           lt a  ERROR - gt   routerLink     RoutingTest    gt Routing Test lt  a gt           lt router-outlet gt  lt  router-outlet gt              AppComponent 2 11   I found a vaguely related issue here  router-link directives broken after upgrading to angular2 0 0-beta 0  However  the  working example  in one of the answers is based on pre-beta code - which may well still work  but I would like to know why the code I have created is not working   Any pointers would be gratefully received

User · Answer

For people who find this when attempting to run tests because via npm test or ng test using Karma or whatever else. Your .spec module needs a special router testing import to be able to build.

import { RouterTestingModule } from '@angular/router/testing';

TestBed.configureTestingModule({
    imports: [RouterTestingModule],
    declarations: [AppComponent],
});

http://www.kirjai.com/ng2-component-testing-routerlink-routeroutlet/

User · Answer

Word of caution when coding with Visual Studio  2013  I have wasted 4 to 5 hours trying to debug this error  I tried all the solutions that I found on StackOverflow by the letter and I still got this error  Can t bind to  routerlink  since it isn t a known native property Be aware  Visual Studio has the nasty habit of autoformatting text when you copy paste code  I always got a small instantaneous adjustment from VS13  camel case disappears   This   lt div gt       lt a  routerLink   quot    catalog   quot  gt Catalog lt  a gt       lt a  routerLink   quot    summary   quot  gt Summary lt  a gt   lt  div gt   Becomes   lt div gt       lt a  routerlink   quot    catalog   quot  gt Catalog lt  a gt       lt a  routerlink   quot    summary   quot  gt Summary lt  a gt   lt  div gt   It s a small difference  but enough to trigger the error  The ugliest part is that this small difference just kept avoiding my attention every time I copied and pasted  By sheer chance  I saw this small difference and solved it

User · Answer

My solution is simple  I am using  href  instead of  routerLink   I have tried all solutions for  routerLink   None of them works in my case    Here is my solution    lt a  href   getPlanUrl    target   blank  gt My Plan Name lt  a gt    Then write the getPlanUrl function in the TS file

User · Answer

If you use shared modules  just add RouterModule to a Module where your component is declared and don t forget to add  lt router-outlet gt  lt  router-outlet gt   Referenced from here RouterLink does not work

User · Answer

If getting this error while unit testing please write this  import   RouterTestingModule   from   angular router testing   beforeEach async      gt      TestBed configureTestingModule       imports   RouterTestingModule       declarations   AppComponent

User · Answer

In my case I have imported the RouterModule in App module but not imported in my feature module  After import the router module in my EventModule the error goes away      import  NgModule   from   angular core       import   BrowserModule   from   angular platform-browser       import  EventListComponent  from    EventList Component       import  EventThumbnailComponent  from    EventThumbnail Component       import   EventService   from    shared Event Service      import  ToastrService  from     shared toastr service       import  EventDetailsComponent  from    event-details event details component       import   RouterModule   from  quot  angular router quot        NgModule         imports  BrowserModule RouterModule         declarations  EventThumbnailComponent EventListComponent EventDetailsComponent         exports   EventThumbnailComponent EventListComponent EventDetailsComponent          providers   EventService ToastrService             export class EventModule

User · Answer

I have tried all methods  which are mentioned above But no one method works for me finally i got solution for above issue and it is working for me    I tried this method   In Html    lt li gt  lt a  click    aboutPageLoad     routerLinkActive  active  gt About lt  a gt  lt  li gt    In TS file   aboutPageLoad         this router navigate    about

User · Answer

You have in your module  import  Routes  RouterModule  from   angular router     you have to export the module RouteModule  example    NgModule     imports   RouterModule forChild routes      exports   RouterModule       to be able to access the functionalities for all who import this module

User · Answer

RC 5  import the RouterModule See also https   angular io guide router   NgModule      imports   RouterModule                RC 2  app routes ts  import   provideRouter  RouterConfig   from   angular router    export const routes  RouterConfig               export const APP ROUTER PROVIDERS    provideRouter routes        main ts  import   bootstrap   from   angular platform-browser-dynamic   import   APP ROUTER PROVIDERS   from    app routes    bootstrap AppComponent   APP ROUTER PROVIDERS       lt  RC 1    Your code is missing      Component               directives   ROUTER DIRECTIVES               You can t use directives like routerLink or router-outlet without making them known to your component    While directive names were changed to be case-sensitive in Angular2  elements still use - in the name like  lt router-outlet gt  to be compatible with the web-components spec which require a - in the name of custom elements   register globally  To make ROUTER DIRECTIVES globally available  add this provider to bootstrap        provide PLATFORM DIRECTIVES   useValue   ROUTER DIRECTIVES   multi  true     then it s no longer necessary to add ROUTER DIRECTIVES to each component

User · Answer

For  gt   V5 import   RouterModule  Routes   from   angular router    const appRoutes  Routes          path  routing-test   component  RoutingTestComponent       NgModule       imports        RouterModule forRoot appRoutes         other imports here           component   Component       selector   my-app       template             lt h1 gt Component Router lt  h1 gt           lt a routerLink  quot  routing-test quot  routerLinkActive  quot active quot  gt Routing Test lt  a gt           lt router-outlet gt  lt  router-outlet gt                For  lt  V5 Also can use RouterLink as a directives ie  directives   RouterLink   that worked for me import  Router  RouteParams  RouterLink  from  angular2 router     Component       selector   my-app       directives   RouterLink       template             lt h1 gt Component Router lt  h1 gt           lt a  routerLink   quot   RoutingTest   quot  gt Routing Test lt  a gt           lt router-outlet gt  lt  router-outlet gt                 RouteConfig        path   routing-test   name   RoutingTest   component  RoutingTestComponent  useAsDefault  true

User · Answer

I really appreciate  raykrow s answer when one has this problem only in a test file  That is where I encountered it  As it is often helpful to have another way to do something as a backup  I wanted to mention this technique that also works  instead of importing RouterTestingModule   import   MockComponent   from  ng2-mock-component         TestBed configureTestingModule     declarations        MockComponent         selector   a         inputs     routerLink    routerLinkActiveOptions                            Typically  one would use routerLink on an  lt a gt  element but adjust the selector accordingly for other components   The second reason I wanted to mention this alternate solution is that  though it served me well in a number of spec files  I ran into a problem with it in one case  Error  Template parse errors      More than one component matched on this element      Make sure that only one component s selector can match a given element      Conflicting components  ButtonComponent Mock  I could not quite figure out how this mock and my ButtonComponent were using the same selector  so searching for an alternate approach led me here to  raykrow s solution

User · Answer

In general  whenever you get an error like Can t bind to  xxx  since it isn t a known native property  the most likely cause is forgetting to specify a component or a directive  or a constant that contains the component or the directive  in the directives metadata array   Such is the case here   Since you did not specify RouterLink or the constant ROUTER DIRECTIVES  ndash  which contains the following   export const ROUTER DIRECTIVES    RouterOutlet  RouterLink  RouterLinkWithHref     RouterLinkActive      ndash  in the directives array  then when Angular parses   lt a  routerLink     RoutingTest    gt Routing Test lt  a gt    it doesn t know about the RouterLink directive  which uses attribute selector routerLink   Since Angular does know what the a element is  it assumes that  routerLink        is a property binding for the a element   But it then discovers that routerLink is not a native property of a elements  hence it throws the exception about the unknown property     I ve never really liked the ambiguity of the syntax   I e   consider   lt something  whatIsThis            gt    Just by looking at the HTML we can t tell if whatIsThis is    a native property of something a directive s attribute selector a input property of something   We have to know which directives        are specified in the component s directive s metadata in order to mentally interpret the HTML   And when we forget to put something into the directives array  I feel this ambiguity  makes it a bit harder to debug

[angular] Angular2 Exception: Can't bind to 'routerLink' since it isn't a known native property

Examples related to angular