Angular2 Exception: Can't bind to 'routerLink' since it isn't a known native property

Question

Obviously the beta for Angular2 is newer than new, so there's not much information out there, but I am trying to do what I think is some fairly basic routing.

Hacking about with the quick-start code and other snippets from the https://angular.io website has resulted in the following file structure:

angular-testapp/
    app/
        app.component.ts
        boot.ts
        routing-test.component.ts
    index.html

With the files being populated as follows:

index.html

<html>

  <head>
    <base href="/">
    <title>Angular 2 QuickStart</title>
    <link href="../css/bootstrap.css" rel="stylesheet">

    <!-- 1. Load libraries -->
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
    <script src="node_modules/angular2/bundles/router.dev.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/boot')
            .then(null, console.error.bind(console));
    </script>

  </head>

  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>

</html>

boot.ts

import {bootstrap}    from 'angular2/platform/browser'
import {ROUTER_PROVIDERS} from 'angular2/router';

import {AppComponent} from './app.component'

bootstrap(AppComponent, [
    ROUTER_PROVIDERS
]);

app.component.ts

import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy} from 'angular2/router';

import {RoutingTestComponent} from './routing-test.component';

@Component({
    selector: 'my-app',
    template: `
        <h1>Component Router</h1>
        <a [routerLink]="['RoutingTest']">Routing Test</a>
        <router-outlet></router-outlet>
        `
})

@RouteConfig([
    {path:'/routing-test', name: 'RoutingTest', component: RoutingTestComponent, useAsDefault: true},
])

export class AppComponent { }

routing-test.component.ts

import {Component} from 'angular2/core';
import {Router} from 'angular2/router';

@Component({
    template: `
        <h2>Routing Test</h2>
        <p>Interesting stuff goes here!</p>
        `
})
export class RoutingTestComponent { }

Attempting to run this code produces the error:

EXCEPTION: Template parse errors:
Can't bind to 'routerLink' since it isn't a known native property ("
        <h1>Component Router</h1>
        <a [ERROR ->][routerLink]="['RoutingTest']">Routing Test</a>
        <router-outlet></router-outlet>
        "): AppComponent@2:11

I found a vaguely related issue here; router-link directives broken after upgrading to angular2.0.0-beta.0. However, the "working example" in one of the answers is based on pre-beta code - which may well still work, but I would like to know why the code I have created is not working.

Any pointers would be gratefully received!

The other question has something different : `directives: [ROUTER_DIRECTIVES]`. — Eric Martinez, Dec 16 '15 at 16:33
I am getting the same error even with ROUTER_DIRECTIVES. `@Component({selector: "app"}) @View({templateUrl: "app.html", directives: [ROUTER_DIRECTIVES, RouterLink]})` — phil, Dec 16 '15 at 21:45
With the addition of `directives: [ROUTER_DIRECTIVES]` and changing from [router-link] to [routerLink] I am no longer getting the error. — phil, Dec 16 '15 at 22:21
I was getting the same error (NG8002: Can't bind to 'routerLink' since it isn't a known property of 'a'). I did not use the cli while creating the component. I forgot to add the component declaration in my module. Adding the component names in the declaration array fixed it for me. — Charanraj Golla, Sep 01 '20 at 04:27

score 403 · Accepted Answer · edited Aug 23 '18 at 08:25

403

>=RC.5

import the RouterModule See also https://angular.io/guide/router

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

>=RC.2

app.routes.ts

import { provideRouter, RouterConfig } from '@angular/router';

export const routes: RouterConfig = [
  ...
];

export const APP_ROUTER_PROVIDERS = [provideRouter(routes)];

main.ts

import { bootstrap } from '@angular/platform-browser-dynamic';
import { APP_ROUTER_PROVIDERS } from './app.routes';

bootstrap(AppComponent, [APP_ROUTER_PROVIDERS]);

<=RC.1

Your code is missing

  @Component({
    ...
    directives: [ROUTER_DIRECTIVES],
    ...)}

You can't use directives like routerLink or router-outlet without making them known to your component.

While directive names were changed to be case-sensitive in Angular2, elements still use - in the name like <router-outlet> to be compatible with the web-components spec which require a - in the name of custom elements.

register globally

To make ROUTER_DIRECTIVES globally available, add this provider to bootstrap(...):

provide(PLATFORM_DIRECTIVES, {useValue: [ROUTER_DIRECTIVES], multi: true})

then it's no longer necessary to add ROUTER_DIRECTIVES to each component.

edited Aug 23 '18 at 08:25

suhailvs

20,182
14
100
98

answered Dec 16 '15 at 17:00

Günter Zöchbauer

623,577
216
2,003
1,567

1

yes you can assign multiple directives too at the time of bootstraping your app like this :- `provide(PLATFORM_DIRECTIVES, {useValue: [ROUTER_DIRECTIVES, FORM_DIRECTIVES, ETC...], multi: true})` – Pardeep Jain May 31 '16 at 05:36
1

That's right, but `FORM_DIRECTIVES` are included in `PLATFORM_DIRECTIVES` by default already. – Günter Zöchbauer May 31 '16 at 05:41
2

This was great, thanks. I also found this useful when trying to put it all together: http://stackoverflow.com/questions/34391790/globally-register-a-directive-in-angular2 – Jeff Jun 01 '16 at 20:13
Maybe a stupid question here, but what is RC.1, RC.2 here? I'm using angular 2.1.2, which RC is it? – Jian Chen Oct 03 '17 at 04:44
RC means release candidate and is used for versions between beta and final release. 2.0.0-RC5 contained some substantial changes, but shortly after that 2.0.0 was released and then things remained stable. Versions before RC.5 didn't have `NgModule`. – Günter Zöchbauer Oct 03 '17 at 04:49
This answer is quite old so I am scared..should I be? – Alexander Mills Jan 05 '18 at 01:08
1

@AlexanderMills why do old andwers scare you? Old answers are battle-tested and therefore very trustworthy ;p – Günter Zöchbauer Jan 05 '18 at 05:55

score 118 · Answer 2 · edited Dec 27 '19 at 14:39

118

For people who find this when attempting to run tests because via npm test or ng test using Karma or whatever else. Your .spec module needs a special router testing import to be able to build.

import { RouterTestingModule } from '@angular/router/testing';

TestBed.configureTestingModule({
    imports: [RouterTestingModule],
    declarations: [AppComponent],
});

http://www.kirjai.com/ng2-component-testing-routerlink-routeroutlet/

edited Dec 27 '19 at 14:39

C.OG

6,236
3
20
38

answered Mar 01 '17 at 06:30

rayepps

2,072
1
12
22

2

This is a great catch! My project wasn't having any problem with normal operation, it was in the `spec` file that I had to add this. Thanks @raykrow! – kbpontius May 03 '17 at 20:53
1

Confirmed to work in angular 4 as well. Thanks for this! – JCisar Oct 27 '17 at 19:24
This must be the accepted answer, the accepted answer is wrong, because when importing `RouterModule`, then you need to call `forRoot` to satisfy the module and then you should provide the `BASE_HREF` and ... – Milad Apr 26 '18 at 01:19
1

Do you have any idea if this is different for Angular 5+? I am getting the similar error `Can't bind to 'active' since it isn't a known property of 'a'.` in several of my unit tests, and have imported `RouterTestingModule`. – Stuart Updegrave May 08 '18 at 10:26

score 25 · Answer 3 · edited Dec 13 '20 at 18:44

25

Word of caution when coding with Visual Studio (2013)

I have wasted 4 to 5 hours trying to debug this error. I tried all the solutions that I found on StackOverflow by the letter and I still got this error: Can't bind to 'routerlink' since it isn't a known native property

Be aware, Visual Studio has the nasty habit of autoformatting text when you copy/paste code. I always got a small instantaneous adjustment from VS13 (camel case disappears).

This:

<div>
    <a [routerLink]="['/catalog']">Catalog</a>
    <a [routerLink]="['/summary']">Summary</a>
</div>

Becomes:

<div>
    <a [routerlink]="['/catalog']">Catalog</a>
    <a [routerlink]="['/summary']">Summary</a>
</div>

It's a small difference, but enough to trigger the error. The ugliest part is that this small difference just kept avoiding my attention every time I copied and pasted. By sheer chance, I saw this small difference and solved it.

edited Dec 13 '20 at 18:44

Roman Patutin

2,171
4
23
27

answered Jul 30 '16 at 12:59

Adrian Moisa

3,923
7
41
66

4

Thank you, you could have mentioned the difference in case between "routerlink" vs "routerLink". Angular 2 expects "routerLink" to be present but finds "routerlink" – Narendran Solai Sridharan Jan 21 '17 at 05:35
Thank you, for some reason, some tutorial used "router-link" with dash in between. But routerLink is the correct version. – windmaomao Aug 16 '17 at 18:45
The same happens with webpack and html-minifier, but only in production. add caseSensitive: true to the html-loader options see: github.com/SamanthaAdrichem/webpack-3.9.1-splitted-config-an‌gular for a working angular 5 + webpack 3.9 config – Samantha Adrichem Dec 04 '17 at 17:47

score 13 · Answer 4 · edited Dec 14 '20 at 08:07

For >= V5

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

const appRoutes: Routes = [
    {path:'routing-test', component: RoutingTestComponent}
];

@NgModule({
    imports: [
    RouterModule.forRoot(appRoutes)
    // other imports here
    ]
})

component:

@Component({
    selector: 'my-app',
    template: `
        <h1>Component Router</h1>
        <a routerLink="/routing-test" routerLinkActive="active">Routing Test</a>
        <router-outlet></router-outlet>
        `
})

For < V5

Also can use RouterLink as a directives ie. directives: [RouterLink]. that worked for me

import {Router, RouteParams, RouterLink} from 'angular2/router';

@Component({
    selector: 'my-app',
    directives: [RouterLink],
    template: `
        <h1>Component Router</h1>
        <a [routerLink]="['RoutingTest']">Routing Test</a>
        <router-outlet></router-outlet>
        `
})

@RouteConfig([
    {path:'/routing-test', name: 'RoutingTest', component: RoutingTestComponent, useAsDefault: true},
])

I don't think this applies anymore (Angular 5) etc. – Alexander Mills Jan 05 '18 at 01:31 — Alexander Mills, Jan 05 '18 at 01:31

score 11 · Answer 5 · edited May 23 '17 at 12:26

In general, whenever you get an error like Can't bind to 'xxx' since it isn't a known native property, the most likely cause is forgetting to specify a component or a directive (or a constant that contains the component or the directive) in the directives metadata array. Such is the case here.

Since you did not specify RouterLink or the constant ROUTER_DIRECTIVES – which contains the following:

export const ROUTER_DIRECTIVES = [RouterOutlet, RouterLink, RouterLinkWithHref, 
  RouterLinkActive];

– in the directives array, then when Angular parses

<a [routerLink]="['RoutingTest']">Routing Test</a>

it doesn't know about the RouterLink directive (which uses attribute selector routerLink). Since Angular does know what the a element is, it assumes that [routerLink]="..." is a property binding for the a element. But it then discovers that routerLink is not a native property of a elements, hence it throws the exception about the unknown property.

I've never really liked the ambiguity of the syntax. I.e., consider

<something [whatIsThis]="..." ...>

Just by looking at the HTML we can't tell if whatIsThis is

a native property of something
a directive's attribute selector
a input property of something

We have to know which directives: [...] are specified in the component's/directive's metadata in order to mentally interpret the HTML. And when we forget to put something into the directives array, I feel this ambiguity makes it a bit harder to debug.

score 7 · Answer 6 · edited Mar 08 '17 at 02:02

7

You have in your module

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

you have to export the module RouteModule

example:

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

to be able to access the functionalities for all who import this module.

edited Mar 08 '17 at 02:02

Nev

1,529
21
18

answered Mar 07 '17 at 22:43

alehn96

1,363
1
13
23

score 5 · Answer 7 · edited Nov 07 '18 at 12:45

5

I have tried all methods, which are mentioned above.But no one method works for me.finally i got solution for above issue and it is working for me.

I tried this method:

In Html:

<li><a (click)= "aboutPageLoad()"  routerLinkActive="active">About</a></li>

In TS file:

aboutPageLoad() {
    this.router.navigate(['/about']);
}

edited Nov 07 '18 at 12:45

Ikhlak S.

8,578
10
57
77

answered Aug 12 '16 at 06:19

Sunil Kumar K K

79
1
1

score 5 · Answer 8 · edited Dec 14 '20 at 09:57

In my case I have imported the RouterModule in App module but not imported in my feature module. After import the router module in my EventModule the error goes away.

    import {NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import {EventListComponent} from './EventList.Component';
    import {EventThumbnailComponent} from './EventThumbnail.Component';
    import { EventService } from './shared/Event.Service'
    import {ToastrService} from '../shared/toastr.service';
    import {EventDetailsComponent} from './event-details/event.details.component';
    import { RouterModule } from "@angular/router";
    @NgModule({
      imports:[BrowserModule,RouterModule],
      declarations:[EventThumbnailComponent,EventListComponent,EventDetailsComponent],
      exports: [EventThumbnailComponent,EventListComponent,EventDetailsComponent],
       providers: [EventService,ToastrService]
    })
    export class EventModule {
        
     }

score 3 · Answer 9 · edited Dec 14 '20 at 09:35

3

If getting this error while unit testing please write this.

import { RouterTestingModule } from '@angular/router/testing';
beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [RouterTestingModule],
    declarations: [AppComponent],
  });
}));

edited Dec 14 '20 at 09:35

Mario Petrovic

7,500
14
42
62

answered Dec 24 '18 at 11:36

Deeksha Bilochi

106
1
8

Michael Sorens · Answer 10 · 2020-12-18T02:01:37.083

I really appreciate @raykrow's answer when one has this problem only in a test file! That is where I encountered it.

As it is often helpful to have another way to do something as a backup, I wanted to mention this technique that also works (instead of importing RouterTestingModule):

import { MockComponent } from 'ng2-mock-component';
. . .
TestBed.configureTestingModule({
  declarations: [
    MockComponent({
      selector: 'a',
      inputs: [ 'routerLink', 'routerLinkActiveOptions' ]
    }),
    . . .
  ]

(Typically, one would use routerLink on an <a> element but adjust the selector accordingly for other components.)

The second reason I wanted to mention this alternate solution is that, though it served me well in a number of spec files, I ran into a problem with it in one case:

Error: Template parse errors:
    More than one component matched on this element.
    Make sure that only one component's selector can match a given element.
    Conflicting components: ButtonComponent,Mock

I could not quite figure out how this mock and my ButtonComponent were using the same selector, so searching for an alternate approach led me here to @raykrow's solution.

score 0 · Answer 11 · answered May 09 '18 at 15:42

0

If you use shared modules, just add RouterModule to a Module where your component is declared and don't forget to add <router-outlet></router-outlet>

Referenced from here RouterLink does not work

answered May 09 '18 at 15:42

Yevheniy Potupa

537
5
12

score -4 · Answer 12 · answered Sep 14 '16 at 19:12

My solution is simple. I am using [href] instead of [routerLink]. I have tried all solutions for [routerLink]. None of them works in my case.

Here is my solution:

<a [href]="getPlanUrl()" target="_blank">My Plan Name</a>

Then write the getPlanUrl function in the TS file.

Angular2 Exception: Can't bind to 'routerLink' since it isn't a known native property

12 Answers12

Linked

Related