Sign Up

Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.

Have an account? Sign In

Have an account? Sign In Now

Sign In

Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.

Sign Up Here

Forgot Password?

Don't have account, Sign Up Here

Forgot Password

Lost your password? Please enter your email address. You will receive a link and will create a new password via email.

Have an account? Sign In Now

You must login to ask question.(5)

Forgot Password?

Need An Account, Sign Up Here

Please briefly explain why you feel this question should be reported.

Please briefly explain why you feel this answer should be reported.

Please briefly explain why you feel this user should be reported.

Sign InSign Up

ITtutoria

ITtutoria Logo ITtutoria Logo

ITtutoria Navigation

  • Python
  • Java
  • Reactjs
  • JavaScript
  • R
  • PySpark
  • MYSQL
  • Pandas
  • QA
  • C++
Ask A Question

Mobile menu

Close
Ask a Question
  • Home
  • Python
  • Science
  • Java
  • JavaScript
  • Reactjs
  • Nodejs
  • Tools
  • QA
Home/ Questions/How to fix this error: "can't bind to 'routerlink' since it isn't a known property of ' a'"
Next
In Process
emiliodoylei
  • 3
emiliodoylei
Asked: June 20, 20222022-06-20T10:30:04+00:00 2022-06-20T10:30:04+00:00In: Error

How to fix this error: “can’t bind to ‘routerlink’ since it isn’t a known property of ‘ a'”

  • 3

. Advertisement .

..3..

. Advertisement .

..4..

Hi guys, urgent situation!!!!! I’ve been quite interested in angular-cli lately, however when starting a personal demo project I’m having trouble with the following error: can’t bind to ‘routerlink’ since it isn’t a known property of ‘ a’ When I try to navigate to any routes from the header (which is the router’s origin), I receive the following warning messages:

app.component.html

<app-header></app-header> // Trying to navigate from this component
<router-outlet></router-outlet>
<app-footer></app-footer>
<a [routerLink]="['/signin']">Sign in</a>

Update

1- My package.json is using the stable @angular/router 3.3.1 version.

2- In my chief app module, I have brought in the routing-module. 

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AlertModule } from 'ng2-bootstrap';
import { LayoutModule } from './layout/layout.module';
import { UsersModule } from './users/users.module';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { PageNotFoundComponent } from './shared/components/not-found.component';

@NgModule({
declarations: [
AppComponent,
PageNotFoundComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
AlertModule.forRoot(),
LayoutModule,
UsersModule,
AppRoutingModule --> This is the routing module.
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SigninComponent } from './users/signin/signin.component';
import { PageNotFoundComponent } from './shared/components/not-found.component';

const routes: Routes = [
{ path: '**', component: PageNotFoundComponent }
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})

export class AppRoutingModule {}

Then I try to access authorization from a UsersModule

user-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { SigninComponent } from './signin/signin.component';

const usersRoutes: Routes = [
{ path: 'signin', component: SigninComponent }
];
@NgModule({
imports: [
RouterModule.forChild(usersRoutes)
],
exports: [
RouterModule
]
})

export class UsersRoutingModule { }

Because I have no concept of router module so when navigating layout module an error occurred

Layout.module.ts

import { NgModule } from '@angular/core';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';

@NgModule({
declarations: [HeaderComponent, FooterComponent],
exports: [HeaderComponent, FooterComponent]
})
export class LayoutModule{}

I have read many documents but can’t find a way to fix this error. If anyone knows please just help me. Thanks a lot!!!!

"can't bind to 'routerlink' since it isn't a known property of ' a'"question
  • 1 1 Answer
  • 137 Views
  • 0 Followers
  • 0
Answer
Share
  • Facebook
  • Report

1 Answer

  • Voted
  • Oldest
  • Recent
  • Random
  1. lyytutoria Expert
    2022-06-20T11:42:52+00:00Added an answer on June 20, 2022 at 11:42 am

    The cause: 

    After studying your post, I found out you should join RouterModule to imports of every @NgModule() where any component or directive from (in this instance) is used by components routerLink and <router-outlet>.

    Solution:

    declarations: [] is able to make elements, directives, and streams visible within the present module.

    exports: [] allows importing modules to access elements, instructions, and streams. Only the module can see what is put to declarations . They become known as a result of  exports

    Hope my suggestion will help you to fix this error. Good luck!!

     

    • 3
    • Reply
    • Share
      Share
      • Share on Facebook
      • Share on Twitter
      • Share on LinkedIn
      • Share on WhatsApp
      • Report

Leave an answer
Cancel reply

You must login to add an answer.

Forgot Password?

Need An Account, Sign Up Here

Sidebar

Ask A Question
  • How to Split String by space in C++
  • How To Convert A Pandas DataFrame Column To A List
  • How to Replace Multiple Characters in A String in Python?
  • How To Remove Special Characters From String Python

Explore

  • Home
  • Tutorial

Footer

ITtutoria

ITtutoria

This website is user friendly and will facilitate transferring knowledge. It would be useful for a self-initiated learning process.

@ ITTutoria Co Ltd.

Tutorial

  • Home
  • Python
  • Science
  • Java
  • JavaScript
  • Reactjs
  • Nodejs
  • Tools
  • QA

Legal Stuff

  • About Us
  • Terms of Use
  • Privacy Policy
  • Contact Us

DMCA.com Protection Status

Help

  • Knowledge Base
  • Support

Follow

© 2022 Ittutoria. All Rights Reserved.

Insert/edit link

Enter the destination URL

Or link to existing content

    No search term specified. Showing recent items. Search or use up and down arrow keys to select an item.