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</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</ZoneDelegate</ZoneDelegate.prototype.invoke@http://localhost:4200/main.bundle.js:101413:19
Zone</Zone</Zone.prototype.run@http://localhost:4200/main.bundle.js:101307:24
scheduleResolveOrReject/<@http://localhost:4200/main.bundle.js:101673:52
Zone</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</ZoneDelegate</ZoneDelegate.prototype.invokeTask@http://localhost:4200/main.bundle.js:101446:23
Zone</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"
 }
}

gib-服务

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

Angular2 上的 Jsonp 提供程序错误

Jsonp Provider Error on Angular2

provider

web-services

angular