Angular2: routeLink does not create href attribute

Question

I have three main elements: AppComponent , AdminComponent and LoginComponent . Both AppComponent and LoginComponent show a link to the AdminComponent . AppComponent contains router-outlet and the entire routing configuration.

Now, for some reason, angular renders <a [routerLink]="['Admin']">Admin</a> to <a href="/admin">Admin</a> in the AppComponent as expected. However, the same link in LoginComponent maps to <a>Admin</a> . What am I doing wrong?

Angular versions: 2.0.0-beta.8 and 2.0.0-beta.9.

app.component.ts

 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: ` <a [routerLink]="['Admin']">Admin</a> // This link works as expected <router-outlet></router-outlet> `, directives: [ROUTER_DIRECTIVES] }) @RouteConfig([ { path: '/login', component: LoginComponent, name: 'Login', useAsDefault: true }, { path: '/admin', component: AdminComponent, name: 'Admin' } ]) export class AppComponent { } 

login.component.ts

 import {Component} from 'angular2/core'; import {RouterLink} from 'angular2/router'; @Component({ selector: 'ww-login', directives: [RouterLink], template: ` <div> <a [routerLink]="['Admin']">Admin</a> // Renders <a>Admin</a> <div>login box </div> </div> ` }) export class LoginComponent { } 

HTML output

 <ww-app> <a href="/admin">Admin</a> <!-- link as expected (AppComponent)--> <router-outlet></router-outlet> <ww-login _ngcontent-nky-2=""> <div> <a>Admin</a> <!-- href is missing here (LoginComponent)--> <div>login box </div> </div> </ww-login> </ww-app> 

---

Update

Well, I just messed up a similar question, so the Problem is with the routerLink directive . Looks like angular2 - polyfill.js is a bad boy. See Thierry modified plunkr , where I removed the polyfill from index.html.

Next question :

angular2-polyfill declares itself as

Angular2 polyfill for Angular1

It might be foolish to ask, but is it really necessary? Obviously, this fixed the problem for me, but it gives me some kind of bad feeling, since it is not angular 1. Additional warnings about deprecation do not help ...

Answer 1

I think your problem is that you set your directives as [RouterLink] instead of [ROUTER_DIRECTIVES] .

If you see the code, the RouterLink directive is for tags other than <a> . The router link directive that works with <a> tags is RouterLinkWithHref.

Take a look at the code at https://github.com/angular/angular/blob/master/modules/%40angular/router/src/directives/router_link.ts

 @Directive({selector: ':not(a)[routerLink]'}) export class RouterLink { ... } @Directive({selector: 'a[routerLink]'}) export class RouterLinkWithHref implements OnChanges, OnDestroy { ... }