Error: Route generator for 'item' was not included in parameters passed. (Typescript, angular2, javascript, html) -

screenshot of error: http://imgur.com/ehineyi

link full project:

https://www.dropbox.com/s/84svnggv8xeub5m/fullprojectebayclone.zip?dl=0

context of problem:

the website clone of ebay uses search bar takes data wikipedia.

i'm trying make button will:

1. save variable "item" or "item.name" (i'm trying name of of search result of whatever user typed in clicking button called "click here bid on item".)

2. transfer user bidding page specific item.

code of button in html (wiki.component.ts):

 <button (click)="gotoitem(item)">click here bid on item.</button> 

code of function "gotoitem(item)" (wiki.component.ts):

 gotoitem (item: any) {     this.router.navigate(['biddingpage', {item}]);   } 

links plunker , more details problem:

stackoverflow.com/questions/37422205/displaying-data-that-is-consistent-with-search-results-on-a-different-webpage-t

full code of wiki.component.ts

import { component }        'angular2/core'; import { jsonp_providers }  'angular2/http'; import { observable }       'rxjs'; import { wikipediaservice } './wikipedia.service'; import {router, routeparams, routerlink, router_directives} 'angular2/router';  @component({   selector: 'wikithing',   template: `     <h1>search , display page</h1>     <p><i>fetches after each keystroke</i></p>     <input #term (keyup)="search(term.value)"/>     <ul>      <li *ngfor="#item of items | async">{{item}} <br> <p>        </p> price (in usd): $ {{item.price}} <br> <p>        </p> availability: 24 hours <br> <p>         </p> quantity in stock: {{quantity}}         <br> <p>         </p> image of item: <img src="http://weknowyourdreamz.com/images/apple/apple-05.jpg" alt="apple" style="width:100px;height:100px;">        <br> <p>         </p>                <p>              </p>               <a [routerlink]="['biddingpage']">click here bid on item.</a>            <button (click)="gotoitem(item)">click here bid on item.</button>             <p>                  </p>         <br> <p>         </li>     </ul>   `,   providers:[jsonp_providers, wikipediaservice],   directives: [router_directives, routerlink],  }) export class wikicomponent {   constructor (private wikipediaservice: wikipediaservice, private router:router) {}   items: observable<string[]>;   //  item: item[] = [];      search (term: string) {     this.items = this.wikipediaservice.search(term);     this.items.map((items) => items.map(() => ({       name: items,       prices: math.random(),       quantity: math.random(),       availability: math.random()     })));      var prices = math.random() + math.random();     var quantity = math.random();   }   gotoitem (item: any) {     this.router.navigate(['biddingpage', {item}]);   } } 

full code of biddingpage.component.ts:

import {component, oninit} 'angular2/core'; import {routeconfig, router_directives} 'angular2/router'; import {hero} './hero'; import {heroservice} './hero.service'; import {observable} from'rxjs/rx' import { wikipediaservice } './wikipedia.service'; import { jsonp, urlsearchparams } 'angular2/http'; import { input } 'angular2/core'; import { jsonp_providers }  'angular2/http'; import { subject }          'rxjs/subject'; @component({   selector: 'biddingpagecomponent',   templateurl: 'app/biddingpage.component.html',   styleurls: ['app/biddingpage.component.css'],   providers: [heroservice, jsonp_providers, wikipediaservice],   directives: [router_directives]  })    export class biddingpagecomponent{     constructor (private wikipediaservice: wikipediaservice) {}       @input() item : any; myfunction(slotvalue)   {         this.slot1 = slotvalue;         this.numberofbids +=1;          alert("you have entered new bid.");  }   numberofbids = 0;     slot1 = 0;   secondsleft = 0;   hoursleft = 0;   mightbehours = 0;   ticks = 0;    items : any;   ngoninit(ticks, secondsleft, hoursleft, hoursleft2){     let timer = observable.timer(2000,1000);     let hoursorminutestimer = observable.timer(2000, 1000);     let hourslefttimer = observable.timer(2000, 1000);     timer.subscribe(t=>this.ticks = t);     secondsleft = 100;     timer.subscribe(t=>this.secondsleft = -t + 86400);     hoursorminutestimer.subscribe(t=>this.hoursleft = t/60);     hourslefttimer.subscribe(t=>this.mightbehours = t/3600);      //this.routeparams.get('item');      }    //items: observable<string[]>;   //  item: item[] = [];      search (term: string) {      this.items = this.wikipediaservice.search(term);     this.items.map((items) => items.map(() => ({       name: items,       prices: math.random(),       quantity: math.random(),       availability: math.random()     })));      var prices = math.random() + math.random();     var quantity = math.random();     }       //this.wikipediaservice.gethero(item)    //   .then(item => this.hero = item);   } 

full code of biddingpage.component.html

<html>     <center> <h3>bidding page</h3> <a name="top"></a> </center> <p>     </p>             <p>              </p>     <form>         <img src="http://weknowyourdreamz.com/images/apple/apple-05.jpg" alt="apple" style="width:100px;height:100px;">         <p>             </p>         <label for="name">name of item: {{item.name}} </label>         <p>              </p>         <label for="name">original price: {{item.price}} </label>          <p>              </p>            <p>              </p>         <label for="name">number of items in stock: {{item.quantity}} </label>             <p>           </p>         description of item’s current condition:          <p>              </p>                 <label for="name">description of item’s current condition: </label>                 <label for="name">the apple fleshy fruit apple tree.                      in species malus domestica in rose family rosaceae.                      apple 1 of grown tree fruits. grown in orchards.</label>         <p>                </p>         <label for="name">time elapsed (in seconds): {{ticks}} </label>             <p>              </p>             <p>           <label for="name">time elapsed (in minutes): {{hoursleft}} </label>             </p>           <p>              </p>           <p>           <label for="name">time elapsed (in hours): {{mightbehours}} </label>             </p>         <label for="name">current highest bid: $ {{slot1}} </label>          <p>               </p>   <p>              <label for="name">time left (in hours): {{secondsleft/3600}} </label>              <p>            <p>              <p>              <label for="name">time left (in minutes): {{secondsleft/60}} </label>              <p>            <p>              <label for="name">time left (in seconds): {{secondsleft}} </label>              <p>               note: there 86400 seconds in 1 day.              </p>            <label for="name">number of bids far: {{numberofbids}} </label>              <p>              </p>     bid slot 1: <p>$ {{slot1}} </p>           <p>              </p>   <label for="name">enter bid: </label> <input type="number" #bid class="form-control" required>  <button (click)='myfunction(bid.value)'>click here bid.</button>              <p>                  </p>          <!--  copyright 2016 google inc. rights reserved. use of source code governed mit-style license can found in license file @ http://angular.io/license --> 

{item} in

this.router.navigate(['biddingpage', {item}]); 

is invalid. can pass array contains strings or objects. {item} neither.

you might want pass

this.router.navigate(['biddingpage', {item: item}]); 

or in new rc.1 router

this.router.navigate(['biddingpage/' + item]);