title: Angular2: routeLink does not create href attribute
body: <p>I have three very basic components: <code>AppComponent</code>, <code>AdminComponent</code> and <code>LoginComponent</code>. Both <code>AppComponent</code> and <code>LoginComponent</code> show a link to <code>AdminComponent</code>. <code>AppComponent</code> contains the <code>router-outlet</code> and all the routing configuration.</p>
  
  <p>Now for some reason angular renders <code>&lt;a [routerLink]="['Admin']"&gt;Admin&lt;/a&gt;</code> to <code>&lt;a href="/admin"&gt;Admin&lt;/a&gt;</code> in <code>AppComponent</code> just as expected. However, the exact same link in <code>LoginComponent</code> is rendered to <code>&lt;a&gt;Admin&lt;/a&gt;</code>. What am I doing wrong?</p>
  
  <p>Angular versions tried: 2.0.0-beta.8 and 2.0.0-beta.9.</p>
  
  <p><strong>app.component.ts</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import {Component} from 'angular2/core';
  import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
  
  import {AdminComponent} from './admin.component';
  import {LoginComponent} from './login.component';
  
  @Component({
    selector: 'ww-app',
    template: `
      &lt;a [routerLink]="['Admin']"&gt;Admin&lt;/a&gt;             // This link works as expected
  
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
    `,
    directives: [ROUTER_DIRECTIVES]
  })
  @RouteConfig([
    { path: '/login', component: LoginComponent, name: 'Login', useAsDefault: true },
    { path: '/admin', component: AdminComponent, name: 'Admin' }
  ])
  export class AppComponent {
  }
  </code></pre>
  
  <p><strong>login.component.ts</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import {Component} from 'angular2/core';
  import {RouterLink} from 'angular2/router';
  
  @Component({
    selector: 'ww-login',
    directives: [RouterLink],
    template: `
      &lt;div&gt;
        &lt;a [routerLink]="['Admin']"&gt;Admin&lt;/a&gt;        // Renders &lt;a&gt;Admin&lt;/a&gt;
        &lt;div&gt;login box &lt;/div&gt;
      &lt;/div&gt;
    `
  })
  export class LoginComponent {
  }
  </code></pre>
  
  <p><strong>Rendered HTML output</strong></p>
  
  <pre><code>&lt;ww-app&gt;
    &lt;a href="/admin"&gt;Admin&lt;/a&gt;          &lt;!-- link as expected (AppComponent)--&gt;
    &lt;router-outlet&gt;&lt;/router-outlet&gt;
    &lt;ww-login _ngcontent-nky-2=""&gt;
      &lt;div&gt;
        &lt;a&gt;Admin&lt;/a&gt;                    &lt;!-- href is missing here (LoginComponent)--&gt;
        &lt;div&gt;login box &lt;/div&gt;
      &lt;/div&gt;
    &lt;/ww-login&gt;
  &lt;/ww-app&gt;
  </code></pre>
  
  <hr>
  
  <p><strong>Update</strong></p>
  
  <p>Alright, I just stumpled upon a similar question on so <a href="https://stackoverflow.com/questions/35234027/issue-with-routerlink-directive?rq=1">Issue with routerLink directive</a>. Looks like angular2-polyfill.js is the bad boy. See <a href="http://plnkr.co/edit/4yCQydWqJ4FfPRmVcp5G?p=preview" rel="nofollow noreferrer">Thierry's modified plunkr</a> where I removed the polyfill from index.html.</p>
  
  <p><strong>Follow up question</strong>: </p>
  
  <p><a href="https://github.com/samverschueren/angular2-polyfill" rel="nofollow noreferrer">angular2-polyfill</a> declares itself as </p>
  
  <blockquote>
    <p>Angular2 polyfill for Angular1</p>
  </blockquote>
  
  <p>It might be stupid to ask, but do I really need it? Obviously it fixed a problem for me, but it gives me kind of a bad feeling as this is not Angular 1. The additional deprecation warnings don't help either...</p>