Can t bind to routerLink since it isn t a known property

Question

Recently  I have started  playing with angular 2  It s awesome so far  So  i have started a demo personal project for the sake of learning using angular-cli  With the basic routing setup  I now want to navigate to some routes from header  but since my header is a parent to the router-outlet  I receive this error  app component html  lt app-header gt  lt  app-header gt     Trying to navigate from this component      lt router-outlet gt  lt  router-outlet gt   lt app-footer gt  lt  app-footer gt   header component html  lt a  routerLink   quot    signin   quot  gt Sign in lt  a gt   Now I understand partially I guess that since that component is a wrapper around router-outlet it would not be possible this way to access router  So  is there a possibility to access navigation from outside for a scenario like this  I would be really happy to add any more information if needed  Thank you in advance  Update 1- My package json already has the stable  angular router 3 3 1 version  2- In my main app module  I have imported the routing-module  Please see below  app module ts import   BrowserModule   from   angular platform-browser   import   NgModule   from   angular core   import   FormsModule   from   angular forms   import   HttpModule   from   angular http   import   AlertModule    from  ng2-bootstrap   import   LayoutModule   from    layout layout module   import   UsersModule   from    users users module   import   AppRoutingModule   from     app-routing module   import   AppComponent   from    app component   import   PageNotFoundComponent   from    shared components not-found component     NgModule     declarations        AppComponent      PageNotFoundComponent        imports        BrowserModule      FormsModule      HttpModule      AlertModule forRoot        LayoutModule      UsersModule      AppRoutingModule  -- gt  This is the routing module          providers        bootstrap   AppComponent     export class AppModule      app-routing module ts import   NgModule   from   angular core   import   Routes  RouterModule   from   angular router   import   SigninComponent   from    users signin signin component   import   PageNotFoundComponent   from    shared components not-found component    const routes  Routes       path        component  PageNotFoundComponent        NgModule       imports   RouterModule forRoot routes        exports   RouterModule      export class AppRoutingModule     The route I am trying to access is delegated from another module that is the UsersModule user-routing module ts import   NgModule   from   angular core   import   RouterModule  Routes   from   angular router   import   SigninComponent   from    signin signin component    const usersRoutes  Routes         path   signin    component  SigninComponent       NgModule     imports        RouterModule forChild usersRoutes         exports        RouterModule         export class UsersRoutingModule      While I am trying to navigate from a component that is part of the Layout module  but has no notion of the router module  Is that what is causing the error  Layout module ts import   NgModule   from   angular core   import   HeaderComponent   from    header header component   import   FooterComponent   from    footer footer component     NgModule     declarations   HeaderComponent  FooterComponent     exports   HeaderComponent  FooterComponent     export class LayoutModule    I am trying to navigate from the HeaderComponent  I would be happy to provide more information if needed

User · Answer

You are missing either the inclusion of the route package, or including the router module in your main app module.

Make sure your package.json has this:

"@angular/router": "^3.3.1"

Then in your app.module import the router and configure the routes:

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

imports: [
        RouterModule.forRoot([
            {path: '', component: DashboardComponent},
            {path: 'dashboard', component: DashboardComponent}
        ])
    ],

Update:

Move the AppRoutingModule to be first in the imports:

imports: [
    AppRoutingModule.
    BrowserModule,
    FormsModule,
    HttpModule,
    AlertModule.forRoot(), // What is this?
    LayoutModule,
    UsersModule
  ],

User · Answer

You need to add RouterMoudle into imports sections of the module containing the Header component

User · Answer

I was getting this error  even though I have exported RouterModule from app-routing module and imported app-routingModule in Root module app module   Then I identified  I ve imported component in Routing Module only  Declaring the component in my Root module App Module  solves the problem  declarations    AppComponent  NavBarComponent  HomeComponent  LoginComponent

User · Answer

When nothing else works when it should work  restart ng serve  It s sad to find this kind of bugs

User · Answer

You need to add RouterModule to imports of every  NgModule   where components use any component or directive from  in this case routerLink and  lt router-outlet gt    declarations     is to make components  directives  pipes  known inside the current module   exports     is to make components  directives  pipes  available to importing modules  What is added to declarations only is private to the module  exports makes them public   See also https   angular io api router RouterModule usage-notes

User · Answer

I ll add another case where I was getting the same error but just being a dummy  I had added  routerLinkActiveOptions    exact  true   without yet adding routerLinkActive  active    My incorrect code was   lt a class  nav-link active  routerLink   dashboard   routerLinkActiveOptions    exact  true   gt    Home  lt  a gt    when it should have been   lt a class  nav-link active  routerLink   dashboard  routerLinkActive  active   routerLinkActiveOptions    exact  true   gt    Home  lt  a gt    Without having routerLinkActive  you can t have routerLinkActiveOptions

User · Answer

I totally chose another way for this method  app component ts import   Router   from   angular router   export class AppComponent       constructor          private router  Router                routerComment             this router navigateByUrl   marketing social comment             app component html  lt button  click   quot routerComment   quot  gt Router Link  lt  button gt

User · Answer

In my case I just need to import my newly created component to RouterModule   path   newPath   component  newComponent    Then in your app module import the router and configure the routes   import   RouterModule   from   angular router    imports            RouterModule forRoot                path      component  DashboardComponent                path   dashboard   component  DashboardComponent                path   newPath   component  newComponent                      Hope this helps to some one

User · Answer

In the current component s module import RouterModule  Like - import  RouterModule  from   angular router    NgModule      declarations  YourComponents      imports  RouterModule       It helped me

User · Answer

This problem is because you did not import the module import  RouterModule  from   angular router    And you must declare this modulce in the import section    imports  RouterModule

User · Answer

I am running tests for my Angular app and encountered error Can t bind to  routerLink  since it isn t a known property of  a  as well  I thought it might be useful to show my Angular dependencies       quot  angular animations quot    quot  8 2 14 quot        quot  angular common quot    quot  8 2 14 quot        quot  angular compiler quot    quot  8 2 14 quot        quot  angular core quot    quot  8 2 14 quot        quot  angular forms quot    quot  8 2 14 quot        quot  angular router quot    quot  8 2 14 quot    The issue was in my spec file  I compared to another similar component spec file and found that I was missing RouterTestingModule in imports  e g      TestBed configureTestingModule         declarations                               imports   ReactiveFormsModule  HttpClientTestingModule  RouterTestingModule         providers

[angular] Can't bind to 'routerLink' since it isn't a known property

Examples related to angular

Examples related to typescript

Examples related to angular2-routing