Error while using the [routerLink] directive

Asked

Viewed 210 times

0

Hello, I’m having problems when I try to add directive Routerlink. 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 the app/app.module.ts I am 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 could be wrong?

  • Try importing the Routermodule into the module you declared this component

  • It worked perfectly, but it wasn’t supposed to behave that way, because I had already stated it in app.module.ts and this file should already serve for the project everything, or not?

  • No, being in Appmodule does not make it a global resource.

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.