title: Can't bind to 'routerLink' since it isn't a known property
body: <p>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 <code>angular-cli</code>.</p>
  <p>With the basic routing setup, I now want to navigate to some routes from header, but since my header is a parent to the <code>router-outlet</code>, I receive this error.</p>
  <p><strong>app.component.html</strong></p>
  <pre class="lang-html prettyprint-override"><code>&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;
  </code></pre>
  <p><strong>header.component.html</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;a [routerLink]=&quot;['/signin']&quot;&gt;Sign in&lt;/a&gt;
  </code></pre>
  <p>Now I understand partially I guess that since that component is a wrapper around <code>router-outlet</code> it would not be possible this way to access <code>router</code>. So, is there a possibility to access navigation from outside for a scenario like this?</p>
  <p>I would be really happy to add any more information if needed. Thank you in advance.</p>
  <p><strong>Update</strong></p>
  <p>1- My <code>package.json</code> already has the stable <code>@angular/router 3.3.1</code> version.
  2- In my main <code>app</code> module, I have imported the <code>routing-module</code>. Please see below.</p>
  <p><strong>app.module.ts</strong></p>
  <pre><code>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 { }
  </code></pre>
  <p><strong>app-routing.module.ts</strong></p>
  <pre><code>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 {}
  </code></pre>
  <p>The route I am trying to access is delegated from another <code>module</code> that is the <code>UsersModule</code></p>
  <p><strong>user-routing.module.ts</strong></p>
  <pre><code>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 { }
  </code></pre>
  <p>While I am trying to navigate from a component that is part of the <code>Layout</code> module, but has no notion of the router module. Is that what is causing the error.</p>
  <p><strong>Layout.module.ts</strong></p>
  <pre><code>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{}
  </code></pre>
  <p>I am trying to navigate from the <code>HeaderComponent</code>. I would be happy to provide more information if needed.</p>