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

angular errorhandler
angular 2 throw exception
angular error page
this handleerror
exception handling in angularjs
angular throw exception
angularjs http error handling best practices
defaulterrorlogger

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!

>=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.

Catch Angular 2 exceptions, There is interface ExceptionHandler through which you can provide custom implementation of your choosing. See here and documentation. From BETA.0  Angular 2 - Error Handling - Angular 2 applications have the option of error handling. This is done by including the ReactJS catch library and then using the catch

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/

Global Error Handling with Angular2+ - Austin, Angular defines an ErrorHandler class that will allow us to override it and handle custom logic. Typically, I have my error handlers do things like: Show some sort of  Exception logging is one of the most important, yet overlooked parts of application development. Developers often think, “If the application works, why spend extra time manually handling and logging exceptions? Besides, Angular provides a catch-all exception handler.” Angular exception handling does identify new errors, and you should log them.

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 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 habbit 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.

Angular 2, Angular 2 — Custom Exception Handler. Angular 2 has his own way to catch and handle errors. The default implementation of ErrorHandler prints errors messages to the console. You can intercept the default error handling and write a custom exception handler that replaces this default as appropriate for your app. Angular2 Exception: Can’t bind to ‘routerLink’ since it isn’t a known native property 144+ points ? 83,326+ viewed Lester Burnham asked, 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.

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},
])

Custom error handling for Angular, It can be helpful when you're writing exception handlers or adding external handling functionality. $exceptionHandler will simply run on its own,  Results in Something somewhere went terribly wrong being output to the console. That should NEVER happen. It breaks the promise specification. This is crazy and unintuitive, and could be solved by either fixing whatever bug might be causing this (perhaps some ZoneJs issue) or alternatively, by changing the default ExceptionHandler (EXCEPTION_BINDING) to rethrow exceptions instead of swallowing

Angular 2 - Error Handling, This code can be added on top of the chapter for CRUD operations using http. In the product.service.ts file, enter the following code − import { Injectable }  An application that does not handle errors gracefully leaves its users confused and frustrated when the app suddenly breaks without explanation.

ErrorHandler, To intercept error handling, write a custom exception handler that replaces this class MyErrorHandler implements ErrorHandler { handleError(error) { // do  Angular2 exception: Can't bind to 'ngFor' since it isn't a known native property; 3.javascript - Angular2 exception: Can't bind to 'ngForIn' since it isn't a known native property; 4.service - Angular2/http Exception no ConnectionBackend; 5.angular2 - "EXCEPTION: Unexpected directive value 'undefined' on the View of component" in nested

Angular 2 Error Tracking, See the full picture of any Angular 2 exception. Record environment and usage details so you can recreate bugs down to the browser version, OS, and query  Exception thrown EXCEPTION: Attempt to use a dehydrated detector; QED; Possible solutions: The most obvious solution is to create a synchronous EventEmitter but it didn't seem to play well with the framework for me. I got the dreaded Expression has changed after it was checked exception

Custom Error Handling for Angular, It can be helpful when you're writing exception handlers or adding external handling functionality. $exceptionHandler will simply run on its own,  Routing helps in directing users to different pages based on the option they choose on the main page. Hence, based on the option they choose, the required Angular Component will be rendered to the user. Let’s see the necessary steps to see how we can implement routing in an Angular 2 application. Step 1 − Add the base reference tag in the

Comments
  • The other question has something different : directives: [ROUTER_DIRECTIVES].
  • I am getting the same error even with ROUTER_DIRECTIVES. @Component({selector: "app"}) @View({templateUrl: "app.html", directives: [ROUTER_DIRECTIVES, RouterLink]})
  • With the addition of directives: [ROUTER_DIRECTIVES] and changing from [router-link] to [routerLink] I am no longer getting the error.
  • 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})
  • That's right, but FORM_DIRECTIVES are included in PLATFORM_DIRECTIVES by default already.
  • This was great, thanks. I also found this useful when trying to put it all together: stackoverflow.com/questions/34391790/…
  • Maybe a stupid question here, but what is RC.1, RC.2 here? I'm using angular 2.1.2, which RC is it?
  • @AlexanderMills why do old andwers scare you? Old answers are battle-tested and therefore very trustworthy ;p
  • 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!
  • Confirmed to work in angular 4 as well. Thanks for this!
  • 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 ...
  • 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.