Problem with Http No provider for ConnectionBackend!

Hi I’m working on a project and I need to send a post request , however after some search I found that I can send the post request with Http , my problem is that when I try to use Http I get this error in the console :
Failed to navigate: No provider for ConnectionBackend!
I don’t know what is the problem and here is my code :

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Camera, CameraOptions } from '@ionic-native/camera';
import { Transfer, FileUploadOptions, TransferObject } from '@ionic-native/transfer';
import { File } from '@ionic-native/file';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Http, Headers } from '@angular/http';
import 'rxjs/add/operator/map';
/**
 * Generated class for the ProviderRegister page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */
@Component({
  selector: 'page-provider-register',
  templateUrl: 'provider-register.html',
})
export class ProviderRegisterPage {
  regF : FormGroup
  nidP = ''
  tf = ''
  tb = ''
  tr = ''
  tl = ''
  constructor(public http : Http ,public navCtrl: NavController,public transfer: Transfer,public camera : Camera , form : FormBuilder) {
    this.regF = form.group({
      name: ['',Validators.required],
      phone: ['',Validators.required],
      city: ['',Validators.required],
      nid: ['',Validators.required],
      password: ['',Validators.required],
      price : ['',Validators.required]
    });
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad ProviderRegister');
  }


takePick(im){
console.log(im);
var options: CameraOptions = {
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE
    }
    this.camera.getPicture(options).then((imageData) => {
      let base64Image = 'data:image/jpeg;base64,' + imageData;
      console.log(imageData);
      switch(im){
      case 'nid' : {
      break;
    }
    case 'tf' : {
      this.tf = imageData;
      break;
    }
    case 'tb' : {
      this.tb = imageData;
      break;
    }
    case 'tr' : {
      this.tr = imageData;
      break;
    }
    case 'tl' : {
      this.tl = imageData;
      console.log(this.tl);
      
      break;
      } 
    }
      
    }, (err) => {
      console.log('test5');
      // Handle error
    });

}

reg(event){
event.preventDefault();
if(this.regF.valid){
console.log('valid');
if(this.tl == '' || this.nidP == '' || this.tr == '' || this.tf == '' || this.tb == ''){
console.log('an image or more is missing');
}else{
  console.log('you can proceed now');

var url = "here is the url";
let headers = new Headers();
headers.append('Content-Type','Application/json');
let body = {
  name: this.regF.value.name ,
  phone: this.regF.value.phone ,
  city: this.regF.value.city ,
  price: this.regF.value.price ,
  residency_number: this.regF.value.nid ,
  password: this.regF.value.password
};
this.http.post(url,JSON.stringify(body),{headers: headers})
.map(res => res.json())
.subscribe(data => {
  console.log(data);
});
}
}else{
console.log('nah');
}
}

}

and here is my ionic info :

Cordova CLI: 6.4.0 
Ionic Framework Version: 3.0.1
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionic App Scripts Version: 1.3.0
ios-deploy version: 1.9.0 
ios-sim version: 5.0.13 
OS: macOS Sierra
Node Version: v7.9.0
Xcode version: Xcode 8.3 Build version 8E162

Thanks in advance guys

1 Like

You are importing HttpModule in your app module?

yes
here is the import line :

import { Http} from '@angular/http';

and here are the providers :

providers: [
    StatusBar,
    SplashScreen,
    Camera,
    Transfer,
    Http,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    Geolocation
  ]

Http is not the same as HttpModule.

I don’t get it , how can I solve the problem ? and is the syntax in the page will change ?

after some search I did this but still the same problem , here is the code :
1- I imported the HttpModule :

import { HttpModule } from '@angular/http';

then I added it in the import :

  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp),
    AgmCoreModule.forRoot({
      apiKey: 'key'

    })
  ]

and I’m still getting the same error

I am not seeing the ionic-native providers like StatusBar that were in your previous post in this one. What is the complete contents of the app module’s imports now?

here is the full file :

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { Geolocation } from '@ionic-native/geolocation';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { CustomerTabsPage } from '../pages/customer-tabs/customer-tabs';
import { ProviderTabsPage } from '../pages/provider-tabs/provider-tabs';
import { ProviderPage } from '../pages/provider/provider';
import { ProviderRegisterPage } from '../pages/provider-register/provider-register';
import { ProviderMainPage } from '../pages/provider-main/provider-main';
import { ProviderHistoryPage } from '../pages/provider-history/provider-history';
import { ProviderGainPage } from '../pages/provider-gain/provider-gain';
import { CustomerPage } from '../pages/customer/customer';
import { CustomerRegisterPage } from '../pages/customer-register/customer-register';
import { CustomerMainPage } from '../pages/customer-main/customer-main';
import { CustomerHistoryPage } from '../pages/customer-history/customer-history';
import { AgmCoreModule } from 'angular2-google-maps/core';
import { Transfer} from '@ionic-native/transfer';
import { Camera } from '@ionic-native/camera';
import { HTTP } from '@ionic-native/http';
import { Http} from '@angular/http';
import { HttpModule } from '@angular/http';
@NgModule({
  declarations: [
    MyApp,
    HomePage,
    
    // Provider Pages
    ProviderTabsPage,
    ProviderPage,
    ProviderRegisterPage,
    ProviderMainPage,
    ProviderHistoryPage,
    ProviderGainPage,

    // Customer Pages
    CustomerTabsPage,
    CustomerPage,
    CustomerRegisterPage,
    CustomerMainPage,
    CustomerHistoryPage,
  ],
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp),
    AgmCoreModule.forRoot({
      apiKey: 'key'

    })
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,

    // Provider pages
    ProviderTabsPage,
    ProviderPage,
    ProviderRegisterPage,
    ProviderMainPage,
    ProviderHistoryPage,
    ProviderGainPage,

    // Customer Pages
    CustomerTabsPage,
    CustomerPage,
    CustomerRegisterPage,
    CustomerMainPage,
    CustomerHistoryPage,
  ],
  providers: [
    StatusBar,
    SplashScreen,
    Camera,
    Transfer,
    Http,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    Geolocation
  ]
})
export class AppModule {}

Please remove Http from the providers of your app module. The import of HttpModule should bring both it and ConnectionBackend in for you.

3 Likes

Thanks that solved my problem !