angular 4 Error: Uncaught (in promise): Error: No provider for ConnectionBackend! while injecting Jsonp

Question

When i am trying to inject Jsonp, i am seeing this error

Exception: Call to Node module failed with error: Error: Uncaught (in promise): Error: No provider for ConnectionBackend! Error: No provider for ConnectionBackend! at Error (native)

My home.component.ts file

import { NgModule, Component, Injectable } from '@angular/core';
import { HttpModule, JsonpModule, Jsonp, Response, URLSearchParams, Headers, RequestOptions } from '@angular/http';

@Component({
    selector: 'home',
    templateUrl: './home.component.html',
    providers: [HttpModule, JsonpModule, Jsonp]
})

@Injectable()
export class HomeComponent {
    public jsonp: Jsonp;
    constructor(jsonp: Jsonp) {
        this.jsonp = jsonp;
    }

Please help me in resolving this issue.

Answer 1

providers array can only have Injectable not modules

providers: [HttpModule, JsonpModule, Jsonp]

should be

providers: [Jsonp]

Also make sure you should include HttpModule, JsonpModule in imports NgModule of your AppModule

Answer 2

You miss import JsonpModule in your app.module.ts , in the next lines I show you, where you should import JsonpModule .

app.module.ts

  import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { JsonpModule } from '@angular/http'; import { HttpModule } from '@angular/http'; import { HomeComponent } from './yourComponentFolder/home.component' @NgModule({ declarations: [ AppComponent, HomeComponent, ], imports: [ BrowserModule, HttpModule, JsonpModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }