Angular2 RC5 router 3.0.0 - no href in in component from shared library

Question

I have problem with generated routing link in component from shared module.

Here is the plunker.

There are 3 links in navigation menu. When I click on "Information" the page shows correctly and there should be link to Health. But Angular does not parse template and <a> tag being there has no added attribute href.

The same html code

<a routerLink="/health">Health</a>

is used both in menu (where it behaves correctly) and in LandingComponent template.

What and where should I import to have both links working?

Answer 1

Your LandingComponent is a part of SharedModule. Thus you have to import RouterModule into the SharedModule to make the link work in your LandingComponent, here's a correct code for SharedModule:

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

import { LandingComponent } from './landing.component';

@NgModule({
    imports: [RouterModule],
    exports: [LandingComponent],
    declarations: [LandingComponent]
})
export class SharedModule { }

Answer 2

This will work, but more a workaround, Dmitry Nehaychik answer is correct.

import { Component, Input } from '@angular/core';
import { Router } from '@angular/router';
@Component({
    selector: 'landing',
    template: `
<div class="fgnp-panel">
    <h1>Page: {{pageTitle}}</h1>
    <a link (click)="router.navigate(['/Health'])" routerLinkActive="active">Health</a>
</div>`,
    styles: [`  a:link {text-decoration: none; color: blue;}a:visited {color: #EE9A00;}
                a:hover { text-decoration: underline;cursor: pointer;}`]
})
export class LandingComponent {
    @Input()
    pageTitle: string = '';

    constructor(private router: Router) { }
}