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

Question

yes, this is probably the hundredth time some one experiences this problem, but no solution worked for me...

I am using angular 2.0.0 rc and nothing will work, I guess I am missing something, but I have no idea what

this are my files, they all transpile correctly, and yes I tried using the not deprecated route, and yes I did it according to the documentation, both don't work.

app.component.ts

import { Component, OnInit } from '@angular/core';
import {Routes, Router, ROUTER_DIRECTIVES} from '@angular/router';


import {LoginComponent} from './login/login.component';
import {HomeComponent} from './home/home.component';

@Component({
    selector: 'my-app',
    template: `
     <h1>{{title}}</h1>
     <nav>
        <a [routerLink]="['/login']">login</a>
        <a [routerLink]="['/home']">home</a>
     </nav>
     <router-outlet></router-outlet>
  `, directives: [ROUTER_DIRECTIVES]
})
    @Routes([
        { path: '/login', component: LoginComponent},
        { path: '/home', component: HomeComponent},
])
export class AppComponent implements OnInit {

    constructor(private router: Router) { }

    ngOnInit() {
        this.router.navigate(['/home']);
    }

}

main.ts

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { ROUTER_PROVIDERS } from '@angular/router';


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

bootstrap(AppComponent, [ROUTER_PROVIDERS]);

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- 1. Load libraries -->
    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err);  });
    </script>
</head>

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

the rest of the files are pretty much a copy paste from the tutorial, so I won't spam with more code...

Update, I will add that for some reason npm logs don't send a GET request to @angular/routes-deprecated/... but they do send it to other modules. however it is included in the package.json and systemjs.config.js

I think I know what the problem is, I am not sure what is causing it though

as you see there is no routes folder in the chrome assets. Therefore it makes sense it won't know it - however the node_modules in the project files is there, it is specified in the systemjs.config.js just like any other module...

You are using ROUTER_PROVIDERS from router on main.ts and from router-deprecated on app.component.ts. try to user deprecated on both. — Tomer Almog, May 10 '16 at 17:44
and anyway, it's both. The docs use both so i figured it's ok — gilmishal, May 10 '16 at 18:04
Both of what? Both router packages? That won't work. You can configure both but you can't use both together (except maybe when you know exactly what you're doing). Decide for one and tell which one you choose, then we might be able to provide support. — Günter Zöchbauer, May 11 '16 at 05:32
I am not sure what you mean? guess not? and I think I will just upload my code to github, because plunker seems like a copy paste kind of work — gilmishal, May 11 '16 at 07:15
In your actual code, is it `...` not `...` ? because, 1- this is wrong and 2- it will not throw the error in your question because there is no binding. Which means the error is somewhere else — Abdulrahman Alsoghayer, May 11 '16 at 07:17
I tried both ways... anyway, this is my code in git, maybe it will be more of use... https://github.com/gilmishal/angular2_try — gilmishal, May 11 '16 at 07:22
Can you try force-reload in the browser (Ctrl+F5). Maybe there is something used from the cache. — Günter Zöchbauer, May 11 '16 at 07:26
I just cloned your repo. Your typescript code is fine. But it wasn't getting compiled to javascript. Just compile it. Also add `` in `index.html` and you are good to go — Abdulrahman Alsoghayer, May 11 '16 at 07:29
that was the problem... I didn't think ieven think about it... thanks.. — gilmishal, May 11 '16 at 07:54
wait no, I managed to get it compiled, it works using npm command line, however if I use visual studio to run the app it won't work, still with the same error - although it does have reference to @angular/router now. I will just use npm for now, but this is kind of annoying... — gilmishal, May 11 '16 at 08:09

score 1 · Answer 1 · answered May 11 '16 at 07:01

1

Angular needs the [...] around the property name to indicate that it is a binding it needs to resolve. The [...] in the value is only to make Angular parse the assigned value as array.

<a [routerLink]="['/login']">login</a>
<a [routerLink]="['/home']">home</a>

This doesn't explain the error message you get because the error message indicates binding to a property that doesn't exist, while my correction is to make Angular actually do the binding.

answered May 11 '16 at 07:01

Günter Zöchbauer

623,577
216
2,003
1,567

i tried both ways, nothing works.. it's not even loading the @angular/router – gilmishal May 11 '16 at 07:08

score 1 · Answer 2 · edited Jun 27 '16 at 18:18

They have deprecated the RC2 router: http://angularjs.blogspot.com.au/2016/06/improvements-coming-for-routing-in.html

I used the 3.0.0-alpha.7 version.

Based on their example I also made an app.routes.ts file:

import { provideRouter, RouterConfig } from '@angular/router';
import { FooComponent, BarComponent, BazComponent } from './components/bunchOComponents.ts'

export const routes: RouterConfig = [
  { path: 'foo', component: FooComponent },
  { path: 'bar', component: BarComponent },
  { path: 'baz', component: BazComponent }
];

export const APP_ROUTER_PROVIDERS = [
  provideRouter(routes)
];

I then used this in my main.ts file:

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

bootstrap(AppComponent, [
  APP_ROUTER_PROVIDERS
])
.catch(err => console.error(err));

HTH

score 0 · Answer 3 · edited May 11 '16 at 05:30

Since RC.0 angular changed the router to a new implementation, which means that a lot of the examples available online are of the old router.

If you are using @RouteConfig it's the old router. And it's that one that is available at @angular/router-deprecated

The new router uses @Routes and is available from @angular/router

Otherwise the importing of the ROUTER_DIRECTIVES and ROUTER_PROVIDERS are the same.

Other changes that are significant between the releases are.

the new router doesn't support named routes.

Routes

Before:

import {RouteConfig} from '@angular/router-deprecated';
@RouteConfig([
  {path: '/myroute/:id', component: MyRoute, name: 'MyRoute'}
])

After:

import {Routes} from '@angular/router';
@Routes([
  { path: '/myroute/:id`, component: MyRoute }
])

routerLink

The routerLink directive also changed, and doesn't take an object as a second parameter to specify path variables such as id

Before:

<a routerLink="['MyRoute', {id: 1}]">Link</a>

After:

<a routerLink="['/myroute', 1]">Link</a>

I updated the question to use only the new routes, still nothing works. — gilmishal, May 11 '16 at 07:02

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

3 Answers3

Routes

routerLink