'Error: Uncaught (in promise): No provider for Jsonp' (HTML / Javascript / Typescript / Angular2)

Question

Screenshot of error:

The .ts file code (SearchDisplay.component.ts):

import {Component, OnInit} from 'angular2/core';
import {Router} from 'angular2/router';
import {Hero} from './hero';
import {HeroService} from './hero.service';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {HeroesComponent} from './heroes.component';
import {HeroDetailComponent} from './hero-detail.component';
import {DashboardComponent} from './dashboard.component';
import {SpreadSheetComponent} from './spreadsheeteditall.component';
import {SwitchUsersComponent} from './SwitchUsers.component';
import {BiddingPageComponent} from './BiddingPage.component';
import { Injectable } from 'angular2/core';
import { Jsonp, URLSearchParams } from 'angular2/http';



@Component({
  selector: 'SearchAndDisplayComponent',
  templateUrl: 'app/SearchDisplay.component.html',
  styleUrls: ['app/SearchDisplay.component.css'],
  providers: [HeroService],
  directives: [ROUTER_DIRECTIVES]
})

@Injectable()

export class SearchAndDisplayComponent{
   constructor(private jsonp: Jsonp) {}
  search (term: string) {
    let ebayURL = 'http://developer.ebay.com/Devzone/XML/docs/reference/ebay/index.html';
    var params = new URLSearchParams();
params.set('search', term); // the user's search value
    params.set('action', 'opensearch');
    params.set('format', 'json');
    params.set('callback', 'JSONP_CALLBACK');
    // TODO: Add error handling
    return this.jsonp
               .get( ebayURL, { search: params })
               .map(request => <string[]> request.json()[1]);
  }


}

Part of the .html file code that I think might have caused the error (SearchDisplay.component.html):

<input class="search2" id="txtSearch" type="text" name="serach_bar" size="31" maxlength="255"       
value="" style="left: 396px; top: 153px; width: 293px; height: 26px;" />
<input class="search1" type="submit" name="submition" value="Search" style=" padding-  
bottom:20px; left: 691px; top: 153px; height: 23px" />
<button (click)="search(term)">Search</button>
<script type="text/javascript">
    document.getElementById('frmSearch').onsubmit = function() {
        window.location = 'local data here (not sure how to code this)' + document.getElementById('txtSearch').value;
        return false;
    }
</script>

Context of problem: I'm trying to create a search bar for a website that is basically a clone of ebay.

The original code of this was from a wikipedia example search bar, but I want to change it to pull data from ebay (or just create a local search bar that only has the words "apple" and "car" available).

Links to plunker/full zipped project file are posted in this question:

Search bar that hides results that aren't typed into it

Answer 1

Just in case anyone is searching for this now that Angular 2 is final, this can be solved by importing the JsonpModule in your app.module.ts, like so:

import { HttpModule, JsonpModule } from '@angular/http';

@NgModule({
    declarations: [],
    imports: [
        HttpModule,
        JsonpModule
    ],
    providers: [],
    bootstrap: []
})

Answer 2

you are missing JSONP_PROVIDERS in the provider you have to inject at higher level may be when you are bootstrapping application or in some higher level component.

Read more about JSONP_PROVIDERS

The JSONP_PROVIDERS should be included either in a component's injector, or in the root injector when bootstrapping an application.