Angular 2.3.0
I created a module in Angular 2 as shown below:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
import { AppComponentRoute } from './components/+app/index';
import { AppComponent } from './components/+app/app.component';
import { HomeComponentRoute } from './components/+home/index';
import { HomeComponent } from './components/+home/home.component';
import { ContactComponentRoute } from './components/+contact/index';
import { ContactComponent } from './components/+contact/contact.component';
let app_routes: Routes = new Array();
app_routes.push(AppComponentRoute);
app_routes.push(HomeComponentRoute);
app_routes.push(ContactComponentRoute);
@NgModule({
imports:[
BrowserModule,
RouterModule.forRoot(app_routes)
],
declarations: [
AppComponent,
HomeComponent,
ContactComponent
],
bootstrap:[
AppComponent
]
})
The Home Component is structured like this:
home.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'home',
templateUrl: `./app/components/+home/home.component.html`
})
export class HomeComponent { name = 'Home'; }
home.component.html
<nav>
<a routerLink="/contact" routerLinkActive="active">Contact</a>
</nav>
<router-outlet></router-outlet>
The issue I am facing is that the routerLink attribute is not functioning when written in a separate .html file.
Nevertheless, when I include the template directly within the component, it works smoothly:
@Component({
selector: 'home',
template: `
<nav>
<a routerLink="/contact" routerLinkActive="active">Contact</a>
</nav>
<router-outlet></router-outlet>
`
})
How can I make this work in the external .html template?
UPDATE:
I forgot to mention the error message I encounter:
Can't bind to 'routerlink' since it isn't a known property of 'a'.
Thank you!