283

Recently, I have started playing with angular 2. It's awesome so far. So, i have started a demo personal project for the sake of learning using angular-cli.

With the basic routing setup, I now want to navigate to some routes from header, but since my header is a parent to the router-outlet, I receive this error.

app.component.html

<app-header></app-header> // Trying to navigate from this component
    <router-outlet></router-outlet>
<app-footer></app-footer>

header.component.html

<a [routerLink]="['/signin']">Sign in</a>

Now I understand partially I guess that since that component is a wrapper around router-outlet it would not be possible this way to access router. So, is there a possibility to access navigation from outside for a scenario like this?

I would be really happy to add any more information if needed. Thank you in advance.

Update

1- My package.json already has the stable @angular/router 3.3.1 version. 2- In my main app module, I have imported the routing-module. Please see below.

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 {}

The route I am trying to access is delegated from another module that is the 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 { }

While I am trying to navigate from a component that is part of the Layout module, but has no notion of the router module. Is that what is causing the error.

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 am trying to navigate from the HeaderComponent. I would be happy to provide more information if needed.

9
  • Import RouteModule at root of your app, and update the npm package latest stable version
    – harshes53
    Feb 4, 2017 at 3:04
  • Yeah I have the latest stable version. Feb 4, 2017 at 12:46
  • 4
    Did you also add the RouterModule to imports: [] of all modules where you use routerLink or <router-outlet> Feb 4, 2017 at 13:17
  • @Umair module ordering is important in imports, move AppRoutingModule before LayoutModule
    – harshes53
    Feb 4, 2017 at 13:20
  • 1
    @harshes53 I don't think that's true. Feb 4, 2017 at 16:55

17 Answers 17

541

You need to add RouterModule to imports of every @NgModule() where components use any component or directive from (in this case routerLink and <router-outlet>.

import {RouterModule} from '@angular/router';
@NgModule({
   declarations:[YourComponents],
   imports:[RouterModule]

declarations: [] is to make components, directives, pipes, known inside the current module.

exports: [] is to make components, directives, pipes, available to importing modules. What is added to declarations only is private to the module. exports makes them public.

See also https://angular.io/api/router/RouterModule#usage-notes

7
  • @Gunter is it ok to import RouterModule multiple times ? For example if I want to use routerLink in a childModule, I need to import RouterModule into the child module whereas it has already been imported by the root app Module... Nov 25, 2017 at 16:31
  • Yes, it will only included once into the build output. Nov 25, 2017 at 16:32
  • Ok but I think we need to take care to call the method forRoot only once, the children modules should only import RouterModule without calling the forRoot method Nov 25, 2017 at 16:39
  • I think it depends what forRoot does. When egistering providers with forRoot multiple times, the result is the same as if done only once. If you do other things this might not be different. Nov 25, 2017 at 16:42
  • 4
    Thanks for this answer! In my case the app worked, but the tests failed. The solution was to import RouterTestingModule in tests, for each component that uses routerLink. Jan 12, 2020 at 19:33
36

You are missing either the inclusion of the route package, or including the router module in your main app module.

Make sure your package.json has this:

"@angular/router": "^3.3.1"

Then in your app.module import the router and configure the routes:

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

imports: [
        RouterModule.forRoot([
            {path: '', component: DashboardComponent},
            {path: 'dashboard', component: DashboardComponent}
        ])
    ],

Update:

Move the AppRoutingModule to be first in the imports:

imports: [
    AppRoutingModule.
    BrowserModule,
    FormsModule,
    HttpModule,
    AlertModule.forRoot(), // What is this?
    LayoutModule,
    UsersModule
  ],
4
  • This didn't solve the issue. Can you please check my update? Feb 4, 2017 at 12:46
  • @Ben -- "forRoot()" means you're calling a method defined on an imported module that runs configuration or setup for the module. You can also define a method like "forChild()" in a custom module and call it, if you wanted. This method is used for tasks such as setting up a provider for a service. It's also how you get a Singleton Service in Angular. See angular.io/guide/singleton-services
    – RoboBear
    Dec 27, 2018 at 23:53
  • Making AppRoutingModule to be the first in the import solves the problem
    – aRyhan
    Sep 30, 2020 at 21:50
  • Thanks man moving the RouterModule before FormsModule solves the problem for me Apr 16, 2021 at 19:10
16

I'll add another case where I was getting the same error but just being a dummy. I had added [routerLinkActiveOptions]="{exact: true}" without yet adding routerLinkActive="active".

My incorrect code was

<a class="nav-link active" routerLink="/dashboard" [routerLinkActiveOptions]="{exact: true}">
  Home
</a>

when it should have been

<a class="nav-link active" routerLink="/dashboard" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
  Home
</a>

Without having routerLinkActive, you can't have routerLinkActiveOptions.

0
11

I was getting this error, even though I have exported RouterModule from app-routing.module and imported app-routingModule in Root module(app module).

Then I identified, I've imported component in Routing Module only.

Declaring the component in my Root module(App Module) solves the problem.

declarations: [
AppComponent,
NavBarComponent,
HomeComponent,
LoginComponent],
1
  • 1
    This was my issue, but I did not realize it when I read your response. Is it possible to make it more clear that the app.module.ts needs to add the components where you want to include the link in the declarations portion of the @NgModule
    – fei0x
    Feb 23, 2022 at 14:15
10

When nothing else works when it should work, restart ng serve. It's sad to find this kind of bugs.

2
  • 6
    Can conform there is a bug. I just kept deleting the content of the dist folder and rebuilding. Finally it worked. Try adding a link to every component in app.component.ts. If that dosn't work your only option is prayer and fasting.
    – user3230660
    Apr 20, 2020 at 20:14
  • 1
    Yes restarting ng server was what fixed it for me. After making sure I had RouterModule imported in the module.Thank you @Tudor
    – Glenster
    Mar 12, 2021 at 7:33
9

You need to import RouterModule in your main module.ts file

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


@NgModule({
  imports: [RouterModule],
 )}
7

Just add RouterModule like this:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SidebarItemComponent } from './sidebar-item/sidebar-item.component';
import { RouterModule } from '@angular/router';

@NgModule({
  declarations: [
    SidebarItemComponent
  ],

  imports: [
    CommonModule,
    RouterModule,
  ], 
})
export class LayoutModule { }
4

You need to add RouterMoudle into imports sections of the module containing the Header component

4

I am running tests for my Angular app and encountered error Can't bind to 'routerLink' since it isn't a known property of 'a' as well.

I thought it might be useful to show my Angular dependencies:

    "@angular/animations": "^8.2.14",
    "@angular/common": "^8.2.14",
    "@angular/compiler": "^8.2.14",
    "@angular/core": "^8.2.14",
    "@angular/forms": "^8.2.14",
    "@angular/router": "^8.2.14",

The issue was in my spec file. I compared to another similar component spec file and found that I was missing RouterTestingModule in imports, e.g.

    TestBed.configureTestingModule({
      declarations: [
        ...
      ],
      imports: [ReactiveFormsModule, HttpClientTestingModule, RouterTestingModule],
      providers: [...]
    });
  });
4

This problem is because you did not import the module

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

And you must declare this modulce in the import section

   imports:[RouterModule]
2

In my case I just need to import my newly created component to RouterModule

{path: 'newPath', component: newComponent}

Then in your app.module import the router and configure the routes:

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

imports: [
        RouterModule.forRoot([
            {path: '', component: DashboardComponent},
            {path: 'dashboard', component: DashboardComponent},
            {path: 'newPath', component: newComponent}
        ])
    ],

Hope this helps to some one !!!

2

I totally chose another way for this method.

app.component.ts

import { Router } from '@angular/router';
export class AppComponent {

   constructor(
        private router: Router,
    ) {}

    routerComment() {
        this.router.navigateByUrl('/marketing/social/comment');
    }
}

app.component.html

<button (click)="routerComment()">Router Link </button>
1

In the current component's module import RouterModule.

Like:-

import {RouterModule} from '@angular/router';
@NgModule({
   declarations:[YourComponents],
   imports:[RouterModule]

...

It helped me.

1

Just found similar problem in a student's example. After spending 2 hours on checking everything suggested here and in a few similar topics, found that the error was routerlink instead of routerLink.

Seems easy to spot these 'one letter typos', but not in places where you've never saw them before.

1

Old question, and this doesn't appear to be the OP's issue, but I ended up here when searching for the same "Cannot bind to 'routerlink' since it isn't a known property..." message. I thought I'd share what ended up being my issue in case someone else does the same.

After verifying that RouterModule was included in my AppRoutingModule and routes were all set up correctly to no avail, I finally noticed the very subtle issue: Instead of "[routerLink]", I had "[routerlink]" with a lower case 'l'.

Funny how your brain can overlook something staring you in the face sometimes.

1
  • i had the same issue, i was starting to question the whole existence of angular, until i saw this one :))
    – PayamB.
    Mar 11 at 3:47
0

I just lost about 2 hours on this. It was a bug of my Visual Studio. I had to reinstall Angular and update my NPM again and now it works again.

0

Add the RouterModule in your module of the components

Not the answer you're looking for? Browse other questions tagged or ask your own question.