title: How to use RouterLink in HTML template
body: <p><code>Angular 2.3.0</code></p>
  
  <p>I defined an Angular 2 module like so:</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { RouterModule, Routes } from '@angular/router';
  
  import { AppComponentRoute }  from './components/+app/index';
  import { AppComponent }  from './components/+app/app.component';
  import { HomeComponentRoute } from './components/+home/index';
  import { HomeComponent }  from './components/+home/home.component';
  import { ContactComponentRoute } from './components/+contact/index';
  import { ContactComponent }  from './components/+contact/contact.component';
  
  let app_routes: Routes = new Array();
      app_routes.push(AppComponentRoute);
      app_routes.push(HomeComponentRoute);
      app_routes.push(ContactComponentRoute);
  
  @NgModule({
      imports:[
          BrowserModule,
          RouterModule.forRoot(app_routes)
      ],
      declarations: [
          AppComponent,
          HomeComponent,
          ContactComponent
      ],
      bootstrap:[
          AppComponent
      ]
  })
  </code></pre>
  
  <p>The Home <code>Component</code> looks like this:</p>
  
  <p><strong>home.component.ts</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
      selector: 'home',
      templateUrl: `./app/components/+home/home.component.html`
  })
  
  export class HomeComponent  { name = 'Home'; }
  </code></pre>
  
  <p><strong>home.component.html</strong></p>
  
  <pre><code>&lt;nav&gt;
      &lt;a routerLink="/contact" routerLinkActive="active"&gt;Contact&lt;/a&gt;
  &lt;/nav&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p>The problem is that <code>routerLink</code> is not working in the seperate <code>.html</code> file.
  However, when I define the template inline, I can use it like so:</p>
  
  <pre><code>@Component({
      selector: 'home',
      template: `
          &lt;nav&gt;
              &lt;a routerLink="/contact" routerLinkActive="active"&gt;Contact&lt;/a&gt;
          &lt;/nav&gt;
          &lt;router-outlet&gt;&lt;/router-outlet&gt;
      `
  })
  </code></pre>
  
  <p>How do I get this to work in the seperate <code>.html</code> template?</p>
  
  <p><strong>UPDATE</strong>:</p>
  
  <p>I realized I forgot the error I'm getting:</p>
  
  <blockquote>
    <p>Can't bind to 'routerlink' since it isn't a known property of 'a'.</p>
  </blockquote>
  
  <p>Thanks!</p>