Angular2 Router Basics

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.


I added the

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

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



Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: