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


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 website has resulted in the following file structure:


With the files being populated as follows:



    <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/"></script>
    <script src="node_modules/angular2/bundles/"></script>

    <!-- 2. Configure SystemJS -->
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
            .then(null, console.error.bind(console));


  <!-- 3. Display the application -->



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

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

bootstrap(AppComponent, [


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

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

    selector: 'my-app',
    template: `
        <h1>Component Router</h1>
        <a [routerLink]="['RoutingTest']">Routing Test</a>

    {path:'/routing-test', name: 'RoutingTest', component: RoutingTestComponent, useAsDefault: true},

export class AppComponent { }


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

    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>
        "): [email protected]: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!

This question is tagged with angular

~ Asked on 2015-12-16 16:21:19

The Best Answer is



import the RouterModule See also

  imports: [RouterModule],



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

export const routes: RouterConfig = [

export const APP_ROUTER_PROVIDERS = [provideRouter(routes)];


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

bootstrap(AppComponent, [APP_ROUTER_PROVIDERS]);


Your code is missing

    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.

~ Answered on 2015-12-16 17:00:46


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';

    imports: [RouterTestingModule],
    declarations: [AppComponent],

~ Answered on 2017-03-01 06:30:42

Most Viewed Questions: