title: Can't bind to 'routerlink' since it isn't a known native property using angular2-webpack-starter
body: <p>I have problem using Angular2 Router, and I can't work it out.</p>
  
  <p>This is my index.html</p>
  
  <pre><code>&lt;html lang=""&gt;
  &lt;head&gt;
    &lt;title&gt;Angular2 Webpack Starter by @gdi2990 from @AngularClass&lt;/title&gt;
  
    ...
    &lt;script src="https://code.angularjs.org/tools/system.js"&gt;&lt;/script&gt;
    &lt;script src="https://code.angularjs.org/2.0.0-beta.0/angular2.dev.js"&gt;&lt;/script&gt;
    &lt;!-- base url --&gt;
    &lt;base href="/"&gt;
    &lt;!--
      Angular 2
      ES6 browser shim
    --&gt;
    &lt;script src="/lib/es6-shim.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
    &lt;app&gt;
      Loading...
    &lt;/app&gt;
  
    ......
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is my app.ts:</p>
  
  <pre><code>/*
   * Angular 2 decorators and services
   */
  import {Directive, Component, View, ElementRef} from 'angular2/angular2';
  import {RouteConfig, Router} from 'angular2/router';
  import {Http, Headers} from 'angular2/http';
  /*
   * Angular Directives
   */
  import {CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/angular2';
  import {ROUTER_DIRECTIVES} from 'angular2/router';
  import {RouterLink} from 'angular2/router';
  
  import {Home} from '../components/home/home';
  import {Banner} from '../components/banner/banner';
  import {PickVideo} from '../components/pickvideo/pickvideo'
  
  
  /*
   * App Component
   * Top Level Component
   */
  @Component({
  
    selector: 'app',
  
    directives: [ CORE_DIRECTIVES, FORM_DIRECTIVES, ROUTER_DIRECTIVES, RouterLink, Home, Banner ],
  
   ...
    template: `
    &lt;div class="container"&gt;
      &lt;header&gt;
        &lt;banner&gt;&lt;/banner&gt;
      &lt;/header&gt;
      &lt;main&gt;
        &lt;router-outlet&gt;&lt;/router-outlet&gt;
      &lt;/main&gt;
    &lt;/div&gt;
    `
  })
  
  @RouteConfig([
    { path: '/',            redirectTo: 'home'},
    { path: '/home',                  as: 'Home',          component: Home },
    { path: '/pick-video',           as: 'PickVideo',       component: PickVideo}
  ])
  </code></pre>
  
  <p>When page loads, it will redirect to Home, I import ROUTER_DIRECTIVES at home.ts</p>
  
  <p>Inside my home.ts, I have a breadcrum.ts, which has html code like this:</p>
  
  <pre><code>  &lt;li class="active"&gt;
      &lt;a [routerLink]="['Home']"&gt;NAME YOUR APP&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a [routerLink]="['PickVideo']"&gt;PICK YOUR VIDEOS&lt;/a&gt;
    &lt;/li&gt;
  </code></pre>
  
  <p>I also import ROUTER_DIRECTIVES at breadcrumb.ts </p>
  
  <p>but when I open the browser, the exception given like this:</p>
  
  <blockquote>
    <p>Can't bind to 'routerlink' since it isn't a known native property in
    Breadcrumb > ol:nth-child(0) > li:nth-child(1) >
    a:nth-child(1)[[routerlink]=['Home']]</p>
  </blockquote>
  
  <p>What I did:</p>
  
  <p>I checked online, it says the directives: [ROUTER_DIRECTIVES] is missing, but I have add this line of code at both app.ts, home.ts, breadcrumb.ts, it's not working, any advise?</p>
  
  <p>I am using the <a href="https://github.com/AngularClass/angular2-webpack-starter" rel="nofollow">angular2-webpack-starter</a></p>