Angular 2 Beta Routing Error: Template parse errors: Can't bind to 'router-link' since it isn't a known native property

Question

I just started learning angular 2 and I am trying to set up a router. I checked out other blogs about this and nothing has worked so far. I have a basic setup with an apps Component that would be shown when the user clicks the links at the top of the page.

Here is the code I have so far. I am sure that something is missing. Please let me know if so.

index.html

<html>

<head>
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<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',
                baseURL: '/',
                transpiler: 'typescript',
            }
        }
    });
    System.import('app/main')
        .then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->

<body>
<my-app>Loading...</my-app>
</body>

</html>

app.component.ts

import {Component}from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from 'angular2/router';
import {apps} from './apps.component';
// Root level app
@Component({
selector: 'my-app',
directives: [ROUTER_DIRECTIVES],
template: `
    <ul>
        <li><a href="#">Home</a></li>
        <li><a [router-link]="['/apps']">Apps</a></li>
        <li><a href="#">GPS</a></li>
        <li><a href="#">Settings</a></li>
    </ul>

    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <router-outlet></router-outlet>
            </div>
        </div>
    </div>
`
 })

@RouteConfig([{
  path: '/apps',
  as: 'apps',
  component: apps
}])
export class AppComponent {}

apps.component.ts

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

@Component({
 selector: 'apps-menu',
 template: '<h1>I am the apps</h1>'
})

export class apps{

}

main.ts

import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from './app.component';
import {ROUTER_PROVIDERS} from 'angular2/router';

bootstrap(AppComponent, [ROUTER_PROVIDERS]);

Dup of http://stackoverflow.com/questions/32261250/cant-bind-angular2-directive-on-native-element — Günter Zöchbauer, Apr 18 '16 at 04:41
As @MarkPieszak pointed out `as` is deprecated in favor of `name` — Günter Zöchbauer, Apr 18 '16 at 04:45

score 1 · Answer 1 · edited Apr 18 '16 at 04:44

1

Do follow camelCase while using directives on view. Use kebab has been deprecate in angular late alpha version only.

It should be routerLink instead of route-link

<li><a [routerLink]="['/apps']">Apps</a></li>

edited Apr 18 '16 at 04:44

Günter Zöchbauer

623,577
216
2,003
1,567

answered Apr 17 '16 at 20:03

Pankaj Parkar

134,766
23
234
299

thanks. Now it keeps saying 'EXCEPTION: Component "AppComponent" has no route named "apps". in [['/apps'] in AppComponent' – LadyT Apr 17 '16 at 20:34

score 1 · Answer 2 · edited Apr 18 '16 at 04:44

1

You should inject ROUTER_DIRECTIVES during the bootstrap process.

You need to set up your @RouteConfig a little differently.

@RouteConfig([ {
     path      : '/apps',
     name      : 'apps', // notice "name" here not "as"
     component : apps
} ])

Then when you are trying to call a Route you need to do:

<a [routerLink]="['apps']">

edited Apr 18 '16 at 04:44

Günter Zöchbauer

623,577
216
2,003
1,567

answered Apr 17 '16 at 21:43

Mark Pieszak - Trilon.io

61,391
14
82
96

Angular 2 Beta Routing Error: Template parse errors: Can't bind to 'router-link' since it isn't a known native property

2 Answers2