Hello, I'm having problems when I try to add the RouterLink directive. Whenever I add it I'm getting the error below:
compiler.js:486 Uncaught Error: Template parse errors:
Can't bind to 'routerLink' since it isn't a known property of 'a'. ("<div>
<ul >
<li ><a [ERROR ->][routerLink]="['/about']" >para ser dicionado para About</a></li>
<li><a >Sobre</a></li>
"): ng:///HomeModule/HomeComponent.html@2:12
at syntaxError (compiler.js:486)
at TemplateParser.parse (compiler.js:24674)
at JitCompiler._parseTemplate (compiler.js:34629)
at JitCompiler._compileTemplate (compiler.js:34604)
at eval (compiler.js:34505)
at Set.forEach (<anonymous>)
at JitCompiler._compileComponents (compiler.js:34505)
at eval (compiler.js:34375)
at Object.then (compiler.js:475)
at JitCompiler._compileModuleAndComponents (compiler.js:34374)
I'm using the directive this way:
<div>
<ul >
<li ><a [routerLink]="['/about']" >para ser dicionado para About</a></li>
<li><a >Sobre</a></li>
</ul>
</div>
app / app.routes.ts
import { Routes } from '@angular/router';
import { AboutComponent } from './about/about/about.component';
import { HomeComponent } from './home/home/home.component';
export const ROUTES: Routes = [
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent }
];
And in app / app.module.ts I'm importing RouterModule;
import { ROUTES } from './app.routes';
import { AboutModule } from './about/about.module';
import { HomeModule } from './home/home.module';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { RouterModule } from '@angular/router';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HomeModule,
AboutModule,
RouterModule.forRoot(ROUTES)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
What can be wrong?