Jsonp Provider Error on Angular2 - web-services

Question

I struggle http client works, firstly i tried http module but when i searched examples, I saw they did with jsonp. Briefly, when i tried this jsonp i get this error :
Error: Uncaught (in promise): Error: Error in ./MusteriComponent class MusteriComponent **- inline template:0:0 caused by: No provider for Jsonp!**
Stack trace:
resolvePromise#http://localhost:4200/main.bundle.js:101640:31
makeResolver/<#http://localhost:4200/main.bundle.js:101617:13
Zone$1</ZoneDelegate</ZoneDelegate.prototype.invoke#http://localhost:4200/main.bundle.js:101414:19
NgZoneImpl/this.inner<.onInvoke#http://localhost:4200/main.bundle.js:65487:28
Zone$1</ZoneDelegate</ZoneDelegate.prototype.invoke#http://localhost:4200/main.bundle.js:101413:19
Zone$1</Zone</Zone.prototype.run#http://localhost:4200/main.bundle.js:101307:24
scheduleResolveOrReject/<#http://localhost:4200/main.bundle.js:101673:52
Zone$1</ZoneDelegate</ZoneDelegate.prototype.invokeTask#http://localhost:4200/main.bundle.js:101447:23
NgZoneImpl/this.inner<.onInvokeTask#http://localhost:4200/main.bundle.js:65478:28
Zone$1</ZoneDelegate</ZoneDelegate.prototype.invokeTask#http://localhost:4200/main.bundle.js:101446:23
Zone$1</Zone</Zone.prototype.runTask#http://localhost:4200/main.bundle.js:101347:28
drainMicroTaskQueue#http://localhost:4200/main.bundle.js:101579:25
ZoneTask/this.invoke#http://localhost:4200/main.bundle.js:101519:25
app-module
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { HttpModule} from '#angular/http';
import { AppComponent } from './app.component';
import { MainModule } from './main/main.module'
import { routing,
appRoutingProviders } from './app.routing';
import { LoginComponent } from './login/login.component';
import {InMemoryWebApiModule} from "angular2-in-memory-web-api";
import {CosmoData} from "./cosmo-data"
#NgModule({
declarations: [
LoginComponent,
AppComponent
],
imports: [
MainModule,
BrowserModule,
FormsModule,
HttpModule,
routing,
InMemoryWebApiModule.forRoot(CosmoData)
],
providers: [
appRoutingProviders
],
bootstrap: [AppComponent]
})
export class AppModule { }
package-json
{
"name": "cosmo-client",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"start": "ng serve",
"lint": "tslint \"src/**/*.ts\"",
"test": "ng test",
"pree2e": "webdriver-manager update",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"#angular/common": "2.0.0",
"#angular/compiler": "2.0.0",
"#angular/core": "2.0.0",
"#angular/forms": "2.0.0",
"#angular/http": "2.0.0",
"#angular/platform-browser": "2.0.0",
"#angular/platform-browser-dynamic": "2.0.0",
"#angular/router": "3.0.0",
"angular2-in-memory-web-api": "0.0.20",
"core-js": "^2.4.1",
"primeng": "^1.0.0-beta.16",
"rxjs": "5.0.0-beta.12",
"ts-helpers": "^1.1.1",
"zone.js": "^0.6.23"
},
"devDependencies": {
"#types/jasmine": "^2.2.30",
"angular-cli": "1.0.0-beta.14",
"codelyzer": "~0.0.26",
"jasmine-core": "2.4.1",
"jasmine-spec-reporter": "2.5.0",
"karma": "1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.2.1",
"protractor": "4.0.5",
"ts-node": "1.2.1",
"tslint": "3.13.0",
"typescript": "2.0.2",
"webpack": "2.1.0-beta.22"
}
}
gib-service
import { Injectable } from '#angular/core';
import {Observable} from "rxjs";
import {Response,Http,Jsonp} from "#angular/http";
import any = jasmine.any;
#Injectable()
export class GibService {
constructor(private http:Http,private jsonp:Jsonp) { }
items:any;
private handleError(err) {
console.log(err);
return Observable.throw(err);
}
search ():Observable<any> {
return this.jsonp.get('http://gturnquist-quoters.cfapps.io/api/random')
.map(resp => resp.json()).catch(this.handleError);
}
}
MusteriTanimlama
import {Component, OnInit} from '#angular/core';
import {GibService} from "./gib.service";
import {MusteriTanimlama} from "./musteritanimlama";
import { Observable } from 'rxjs/Observable';
import any = jasmine.any;
#Component({
selector: 'cosmo-musteritanimlama',
templateUrl: './musteritanimlama.component.html',
styleUrls: ['./musteritanimlama.component.css'],
providers: [GibService]
})
export class MusteritanimlamaComponent {
constructor(private gibservice: GibService) {
}
search () {
this.gibservice.search().subscribe(m=>{
console.log("search");
console.log(m);
});
}
Thank you for answer

Answer 1

You need add the JsonpModule to imports:
#NgModule({
declarations: [
LoginComponent,
AppComponent
],
imports: [
MainModule,
BrowserModule,
FormsModule,
HttpModule,
JsonpModule, // <<<<===
routing,
InMemoryWebApiModule.forRoot(CosmoData)
],
providers: [
appRoutingProviders
],
bootstrap: [AppComponent]
})
export class AppModule { }