title: Angular2 Component Router basic issue
body: <p>Started learning angular2 beta component routing. I have done this so far.</p>
  
  <p><a href="http://plnkr.co/edit/4YWWGhuBWd2CoWpC3GeY?p=preview" rel="noreferrer">http://plnkr.co/edit/4YWWGhuBWd2CoWpC3GeY?p=preview</a></p>
  
  <p>I have copied following required CDNs. please have a look here.</p>
  
  <pre><code>    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/angular2-polyfills.js"&gt;&lt;/script&gt;
      &lt;script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"&gt;&lt;/script&gt;
      &lt;script src="https://code.angularjs.org/tools/typescript.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/Rx.js"&gt;&lt;/script&gt;
  
  
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/angular2.dev.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/router.dev.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p><strong>src/boot.ts</strong></p>
  
  <pre><code>import {Component} from 'angular2/core';
  import {ROUTER_PROVIDERS,RouteConfig, ROUTER_DIRECTIVES,LocationStrategy} from 'angular2/router';
  import {bootstrap}        from 'angular2/platform/browser';
  
  import{ComponentOne} from 'src/cone';
  import{ComponentTwo} from 'src/ctwo';
  
  @Component({
    selector: 'my-app',
    template: `
      &lt;h1&gt;Component Router&lt;/h1&gt;
      &lt;nav&gt;
        &lt;a [routerLink]="['ComponentOne']"&gt;One&lt;/a&gt;&lt;hr/&gt;
        &lt;a [routerLink]="['ComponentTwo']"&gt;Two&lt;/a&gt;
      &lt;/nav&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
    `,
    directives: [ROUTER_DIRECTIVES]
  })
  @RouteConfig([
    {path:'/component-one', name: 'ComponentOne', component: ComponentOne},
    {path:'/component-two', name: 'ComponentTwo', component: ComponentTwo}
  ])
  export class AppComponent { }
  
      bootstrap(AppComponent, [
        ROUTER_PROVIDERS
  ]);
  </code></pre>
  
  <p><strong>src/cone</strong></p>
  
  <pre><code> import {Component,View} from 'angular2/core';
  
   @Component({
      template: `
      &lt;h1&gt;first Component&lt;/h1&gt;
      `
    })
  
    export class ComponentOne{
      constructor(){
  
        console.log("first component being called");
      }
    }
  </code></pre>
  
  <p><strong>src/ctwo</strong></p>
  
  <pre><code> import {Component,View} from 'angular2/core';
  
   @Component({
      template: `
      &lt;h1&gt;Second Component&lt;/h1&gt;
      `
    })
  
    export class ComponentTwo{
      constructor(){
  
        console.log("Second component being called");
      }
    }
  </code></pre>
  
  <p>Please check your dev console. It gives an error </p>
  
  <blockquote>
    <p>EXCEPTION: Error during instantiation of LocationStrategy! (RouterLink -> Router -> Location -> LocationStrategy).BrowserDomAdapter.logError @ angular2.dev.js:23514
    angular2.dev.js:23514 ORIGINAL EXCEPTION: No base href set. Please provide a value for the APP_BASE_HREF token or add a base element to the document.</p>
  </blockquote>
  
  <p>and in addition it doesn't redirect me to destination. 
  I have tried to add &lt; base href="/" >but it allows gives an error.</p>
  
  <p>I want links to be working properly.</p>