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.

You will need to add `HttpModule` to the `imports` array in your root module (probably `app.module.ts`) not the providers of the component. Since Angular rc5 `providers` should not be in the `@Component` — 0mpurdy, Jul 29 '17 at 19:18
This is similar to https://stackoverflow.com/questions/40098413/angular-2-no-provider-for-connectionbackend — 0mpurdy, Jul 29 '17 at 19:21

score 2 · Answer 1 · answered Jul 29 '17 at 19:17

2

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

answered Jul 29 '17 at 19:17

Pankaj Parkar

134,766
23
234
299

Thank you for the response. I have modified **home.component.ts** as you suggested by removing **HttpModule and JsonpModule** from providers and add them in **NgModule**, but still i am seeing same error. – Srinivas Adumulla Jul 30 '17 at 15:22
@SrinivasAdumulla can you create a plunker of the same? – Pankaj Parkar Jul 30 '17 at 15:42

score 0 · Answer 2 · answered Sep 13 '17 at 13:04

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

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

2 Answers2

Linked