In the learning curve of Angular2 router features, I ran into a bug that left my head scratching. Trying to render a routerLink would not create the necessary href url. As in:

<a  routerLink=”app/people-search” routerLinkActive=”active”><i class=”fa fa-search fa-fw” aria-hidden=”true”></i>People Search</a>

would render to:

<a _ngcontent-rxo-12=”” routerlink=”app/people-search” routerlinkactive=”active”><i _ngcontent-rxo-12=”” aria-hidden=”true” class=”fa fa-search fa-fw”></i>People Search</a>

As you can see, no href rendered, just the routerLink and routerLinkActive directives rendering as all lowercase attributes. Weird.

Well not so if I had actually picked up this line from the documentation:

RouterLink, RouterLinkActive and RouterOutlet are directives provided by the Angular RouterModulepackage. They are readily available for us to use in our template.

Duh.

I added the

import { RouterModule } from ‘@angular/router’;

statement to my module definition file and I was back in business.

Basics.