NO PROVIDER FOR CONNECTIONBACKEND! ionic 3 SOLVED

[Smirnova]

Hi all,

I’m trying to read from the local JSON file via service

1. In the app.module: imported HttpModule and then included it in the imports array as well.

2. The service.ts looks like that:

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';


@Injectable()
export class DrinksInfoService {
 private baseUrl = 'www/drinksData';
    constructor(public http: Http) {}

    getDrinksInfo() {
        return new Promise(resolve => {
            this.http.get(`${this.baseUrl}/drinks.json`)
            .subscribe(res => resolve(res.json()));
        });
    }
}

3. On the app.component.ts file I imported the service, Http, added it to providers like so:

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { Storage } from '@ionic/storage';
import { Http } from '@angular/http';

import { DrinksService} from '../shared/shared';
import { DrinksInfoService } from '../shared/shared';

import { SettingsPage } from '../pages/pages';
import { MainPage } from '../pages/pages';


@Component({
  templateUrl: 'app.html',
  providers: [  DrinksService,
                DrinksInfoService,
                Http ]
})
export class MyApp {
  rootPage: any = SettingsPage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen,
              public storage: Storage,
              private http: Http)

4. And finally on my page (page for tab to be more specific), I’ve imported the service and then added property drinksInfo: any; and this method to ionViewDidLoad

this.DrinksInfoService.getDrinksInfo().then(data => this.drinksInfo = data);

And as a result I have an error stating “NO PROVIDER FOR CONNECTIONBACKEND!”

Please help. Spent the whole day for debugging.

Thank you.
Olga

[rapropos]

Do not instantiate Promises needlessly. Do not declare providers in components unless you are absolutely certain of what you are doing. Declare them in your app module.

[Smirnova]

Hmm, ok!

1. app.module.ts:

• added Http to providers array

2. app.component.ts

• removed Http from providers array
• did not remove http import and private http: Http from constructor

3. Updates the method in the service:

getDrinksInfo() : Observable<any> {
        return this.http.get(`${this.baseUrl}/drinks.json`)
        .map((response: Response) => {
            this.drinksInfo = response.json();
            return this.drinksInfo;
        })
    }

4. Updated he call for that . method on the page:
   this.DrinksInfoService.getDrinksInfo().subscribe(data => this.drinksInfo = data.drinksInfo);

Have the same error still 8(

[rapropos]

Is HttpModule imported in your app module?

[Smirnova]

Yep! As I mentioned at the initial post: in the app.module HttpModule was @imported and then included it in the imports array as well.

[Smirnova]

Fixed it by removing this as well:

@Smirnova

did not remove http import and private http: Http from constructor

Thanks for the advices!

[isa-cnd]

Hi friend, im having the same problem right know…
How do you resolve the problem?
I have the httpModule in the array of imports
the http in the array of providers
and this function bellow,

AuthHttp,
    {
      provide: AuthHttp,
      useFactory: getAuthHttp,
      deps: [Http, Storage]
    },

the function getAuthHttp ->

export function getAuthHttp(http, storage) {
  return new AuthHttp(new AuthConfig({
    headerName: 'Authorization',
    headerPrefix: 'Bearer',
    tokenName: 'id_token',
    noJwtError: true,
    globalHeaders: [{
      'Accept': 'application/json', 'Content-Type':
        'application/json'
    }],
    tokenGetter: (() => storage.get('id_token')),
  }), http);
}

Im having the same problem as you “NullInjectorError: No provider for ConnectionBackend!”

Can you help me?

[mxms]

To anyone else reading this that was as confused as me - just remove Http from “Providers” in app.module.ts and make sure that HttpModule is in your imports in app.module.ts - keep private http: Http inside of your page constructor.

[supriya412]

Hey Thanks, It works like charm…

[Smirnova]

Sorry mate, I’ve missed your comment as was too busy with a newborn.

So yes, as per my last comment, the key was to remove http import from the providers array in the component and to add it to providers in module.ts.

mxms used HttpModule instead of Http though, which worked as well.