router-link directives broken after upgrading to angular2.0.0-beta.0

Question

I have a component like this in Angular 2 (alpha version 49):

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

@RouteConfig([
    {path: '/DeleteProduct', as: 'DeleteProduct', component: DeleteProduct}
])

@Component({
    selector: 'app'
})
@View({
    directives: [ROUTER_DIRECTIVES],
    template: `
  <div>
      <nav class="navbar navbar-default">
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav navbar-right">
                <li><a [router-link]="['/DeleteProduct']">Add/Delete</a></li>
              </ul>
            </div>
          </div>
      </nav>

      <div>
        <router-outlet></router-outlet>
      </div>
  </div>
  `
})
export class App {
}

which was working perfectly fine. Today I have upgraded my angular version to 2.0.0-beta.0. Now the above code fails with message:

Can't bind to 'router-link' since it isn't a known native property ("collapse-1">
. . . 
App@10:23
    at new t (http://localhost:9000/node_modules/angular2/bundles/angular2.min.js:6:5082)
    at e.parse (http://localhost:9000/node_modules/angular2/bundles/angular2.min.js:18:4350)
    at http://localhost:9000/node_modules/angular2/bundles/angular2.min.js:18:20295
    at Zone.run (http://localhost:9000/node_modules/angular2/bundles/angular2-polyfills.js:138:17)
    at Zone.run (http://localhost:9000/node_modules/angular2/bundles/angular2.min.js:4:14657)
    at zoneBoundFn (http://localhost:9000/node_modules/angular2/bundles/angular2-polyfills.js:111:19)
    at lib$es6$promise$$internal$$tryCatch (http://localhost:9000/node_modules/angular2/bundles/angular2-polyfills.js:1511:16)
    at lib$es6$promise$$internal$$invokeCallback (http://localhost:9000/node_modules/angular2/bundles/angular2-polyfills.js:1523:17)
    at lib$es6$promise$$internal$$publish (http://localhost:9000/node_modules/angular2/bundles/angular2-polyfills.js:1494:11)
    at http://localhost:9000/node_modules/angular2/bundles/angular2-polyfills.js:243:5

-----async gap-----
Error
    at _getStacktraceWithUncaughtError (http://localhost:9000/node_modules/angular2/bundles/angular2-polyfills.js:2195:26)
    at Zone.fork (http://localhost:9000/node_modules/angular2/bundles/angular2-polyfills.js:2253:40)
    at Zone.bind (http://localhost:9000/node_modules/angular2/bundles/angular2-polyfills.js:109:48)
    at bindArguments (http://localhost:9000/node_modules/angular2/bundles/angular2-polyfills.js:980:29)
    at lib$es6$promise$promise$$Promise.obj.(anonymous function) [as then] (http://localhost:9000/node_modules/angular2/bundles/angular2-polyfills.js:1000:37)
    at e._compileComponentRuntime (http://localhost:9000/node_modules/angular2/bundles/angular2.min.js:18:20236)
    at e.componentTemplateFactory (http://localhost:9000/node_modules/angular2/bundles/angular2.min.js:18:20935)
    at e.createBeginComponent (http://localhost:9000/node_modules/angular2/bundles/angular2.min.js:15:2637)
    at e.visitElement (http://localhost:9000/node_modules/angular2/bundles/angular2.min.js:15:6099)
    at e.visit (http://localhost:9000/node_modules/angular2/bundles/angular2.min.js:14:23018)

-----async gap-----
Error
    at _getStacktraceWithUncaughtError (http://localhost:9000/node_modules/angular2/bundles/angular2-polyfills.js:2195:26)
    at Zone.fork (http://localhost:9000/node_modules/angular2/bundles/angular2-polyfills.js:2253:40)
    at Zone.bind (http://localhost:9000/node_modules/angular2/bundles/angular2-polyfills.js:109:48)
    at bindArguments (http://localhost:9000/node_modules/angular2/bundles/angular2-polyfills.js:980:29)
    at lib$es6$promise$promise$$Promise.obj.(anonymous function) [as then] (http://localhost:9000/node_modules/angular2/bundles/angular2-polyfills.js:1000:37)
    at e._compileComponentRuntime (http://localhost:9000/node_modules/angular2/bundles/angular2.min.js:18:20236)
    at e.compileHostComponentRuntime (http://localhost:9000/node_modules/angular2/bundles/angular2.min.js:18:19425)
    at t.compileInHost (http://localhost:9000/node_modules/angular2/bundles/angular2.min.js:18:24265)
    at t.loadAsRoot (http://localhost:9000/node_modules/angular2/bundles/angular2.min.js:11:7604)
    at g.provide.useFactory (http://localhost:9000/node_modules/angular2/bundles/angular2.min.js:11:11883)

-----async gap-----
Error
    at _getStacktraceWithUncaughtError (http://localhost:9000/node_modules/angular2/bundles/angular2-polyfills.js:2195:26)
    at Zone.fork (http://localhost:9000/node_modules/angular2/bundles/angular2-polyfills.js:2253:40)
    at e._createInnerZone (http://localhost:9000/node_modules/angular2/bundles/angular2.min.js:4:14446)
    at new e (http://localhost:9000/node_modules/angular2/bundles/angular2.min.js:4:11954)
    at i (http://localhost:9000/node_modules/angular2/bundles/angular2.min.js:11:12294)
    at t.application (http://localhost:9000/node_modules/angular2/bundles/angular2.min.js:11:14286)
    at Object.n [as bootstrap] (http://localhost:9000/node_modules/angular2/bundles/angular2.min.js:19:711)
    at execute (http://localhost:9000/dist/bootstrap.js:18:23)
    at u (http://localhost:9000/node_modules/systemjs/dist/system.js:5:97)
    at Object.execute (http://localhost:9000/node_modules/systemjs/dist/system.js:5:3188)

Where am I making a mistake? The changelog doesn't say anything about it.

score 7 · Accepted Answer · answered Dec 16 '15 at 05:18

7

router-link was renamed to routerLink as part of removing the '-' based syntax.

I have an working sample here: http://www.syntaxsuccess.com/viewarticle/routing-in-angular-2.0

answered Dec 16 '15 at 05:18

TGH

38,769
12
102
135

Thanks for the answer. One final question `fromArray` functions from `Observables` are been moved too? – Ant's Dec 16 '15 at 06:22

score 3 · Answer 2 · answered Dec 16 '15 at 06:51

A link to this (camelCase) breaking change:

2.0.0-alpha.52 (2015-12-10)

Angular templates are now case-sensitive and use camelCase instead of kebab-case (dash-case).

Before:

<p *ng-if="cond">
<my-cmp [my-prop]="exp">
<my-cmp (my-event)="action()">
<my-cmp [(my-prop)]="prop">
<input #my-input>
<template ng-for #my-item [ng-for-of]=items #my-index="index">

After:

<p *ngIf="cond">
<my-cmp [myProp]="exp">
<my-cmp (myEvent)="action()">
<my-cmp [(myProp)]="prop">
<input #myInput>`,
<template ngFor="#myItem" [ngForOf]=items #myIndex="index">

And a link to Observables issue

2.0.0-alpha.53 (2015-12-13)

Observable are no more re-exported from angular2/core

Before
import {Observable} from 'angular2/core'
After
import {Observable} from 'rxjs/Observable';

Thanks one final question. Before I will be using `[dataToBePassed]` for passing around data from one component to another component. But this syntax `[dataTobePassed]` results in `Can't bind to 'dataTobePassed' since it isn't a known native property` — Ant's, Dec 16 '15 at 08:13

router-link directives broken after upgrading to angular2.0.0-beta.0

2 Answers2

2.0.0-alpha.52 (2015-12-10)

2.0.0-alpha.53 (2015-12-13)

Linked