angular - How to setup a router-link? -

i have read several blog posts1, including official documentation, router-link can setup using following markup:

<nav>   <ul>     <li><a router-link="start">start</a></li>     <li><a router-link="about">about</a></li>     <li><a router-link="contact">contact</a></li>   </ul> </nav> 

and routeconfig:

import { start } './components/start'; import { } './components/about'; import { contact } './components/contact';  // ...  @routeconfig([   { path: '/', component: start, 'start'}   { path: '/about', component: about, 'about'}   { path: '/contact', component: contact, 'contact'} ]) 

running above code using 2.0.0-alpha.31 build produces following error:

typeerror: list.reduce not function in [red in null] stacktrace: error: typeerror: list.reduce not function in [red in null]     @ changedetectionerror.baseexception (http://127.0.0.1:8000/static/app.js:9569:24)     @ new changedetectionerror (http://127.0.0.1:8000/static/app.js:13676:17)     @ abstractchangedetector.throwerror (http://127.0.0.1:8000/static/app.js:14477:16)     @ abstractchangedetector.changedetector_app_comp_0.detectchangesinrecords (eval @ <anonymous> (http://127.0.0.1:8000/static/app.js:16974:17), <anonymous>:30:16)     @ abstractchangedetector._detectchanges (http://127.0.0.1:8000/static/app.js:14443:15)     @ abstractchangedetector._detectchangesinshadowdomchildren (http://127.0.0.1:8000/static/app.js:14464:19)     @ abstractchangedetector._detectchanges (http://127.0.0.1:8000/static/app.js:14447:15)     @ abstractchangedetector.detectchanges (http://127.0.0.1:8000/static/app.js:14438:74)     @ lifecycle.tick (http://127.0.0.1:8000/static/app.js:34739:35)     @ tick (http://127.0.0.1:8000/static/app.js:30323:17) 

as of angular2/router@0.5.3 | 2.0.0-alpha.38 appears have changed.

the link points alias of route , aliases have camelcase (technically pascalcase).

<nav>   <ul>     <li><a [router-link]="['/start']">start</a></li>     <li><a [router-link]="['/about']">about</a></li>     <li><a [router-link]="['/contact']"contact</a></li>   </ul> </nav>  @routeconfig([   { path: '/', component: start, name: 'start'}   { path: '/about', component: about, name: 'about'}   { path: '/contact', component: contact, name: 'contact'} ]) 

looks they're trying ensure users don't confuse binding route path.

sources:

• angular/changelog.md
• angular/issues#4083
• angular/commit/5298eb0

update:

as of 2.0.0-alpha.45

• the routeconfig property as changed name

source:

• angular/commit/7d83959