Angular2上的Jsonp提供程序错误

Question

我努力争取http客户端工作，首先我尝试了http模块，但是当我搜索示例时，我看到他们用jsonp做了。简单地说，我想这JSONP我得到这个错误：

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 

应用模块

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 { } 

包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" 
} 
} 

镦服务

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); 
    }); 
} 

谢谢你的答案

Answer 1

您需要添加JsonpModule到imports：

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