No provider for HTTP! { HTTP Native}

ThunderBirdsX3 · April 17, 2017, 5:25am

I got an error No provider for HTTP!, When i use ionic-native/http.

Provider api.ts

import { Injectable } from '@angular/core';
import { HTTP } from '@ionic-native/http';

@Injectable()
export class Api {
  constructor(public http: HTTP) {
    console.log('Hello API Provider');
  }
}

I got an error, When I came in this controller (test.ts).

Page test.ts

import { Component } from '@angular/core';
import { NavController, NavParams, Platform } from 'ionic-angular';
import { Api } from '../../providers/api';

@Component({
  selector: 'page-test',
  templateUrl: 'test.html'
})
export class CreateTest {
  constructor(public api: Api) {
  }
}

Your system information:

Cordova CLI: 6.5.0
Ionic Framework Version: 3.0.1
Ionic CLI Version: 2.2.2
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.0
ios-deploy version: 1.9.1
ios-sim version: 5.0.13
OS: macOS Sierra
Node Version: v6.9.5
Xcode version: Xcode 8.2.1 Build version 8C1002

Full Error.

Runtime Error
Uncaught (in promise): Error: No provider for HTTP! Error 
  at g (http://localhost:8100/build/polyfills.js:3:7133) 
  at injectionError (http://localhost:8100/build/main.js:1511:86) at noProviderError (http://localhost:8100/build/main.js:1549:12) 
  at ReflectiveInjector_._throwOrNull (http://localhost:8100/build/main.js:3051:19) 
  at ReflectiveInjector_._getByKeyDefault (http://localhost:8100/build/main.js:3090:25) 
  at ReflectiveInjector_._getByKey (http://localhost:8100/build/main.js:3022:25) at ReflectiveInjector_.get (http://localhost:8100/build/main.js:2891:21) 
  at AppModuleInjector.get (ng:///AppModule/module.ngfactory.js:220:79) 
  at AppModuleInjector.getInternal (ng:///AppModule/module.ngfactory.js:427:43) at AppModuleInjector.NgModuleInjector.get (http://localhost:8100/build/main.js:3855:44) 
  at resolveDep (http://localhost:8100/build/main.js:11260:45) 
  at createClass (http://localhost:8100/build/main.js:11128:32) 
  at createDirectiveInstance (http://localhost:8100/build/main.js:10954:37) 
  at createViewNodes (http://localhost:8100/build/main.js:12303:49) 
  at createRootView (http://localhost:8100/build/main.js:12208:5)
Stack
Error: Uncaught (in promise): Error: No provider for HTTP!
Error
    at g (http://localhost:8100/build/polyfills.js:3:7133)
    at injectionError (http://localhost:8100/build/main.js:1511:86)
    at noProviderError (http://localhost:8100/build/main.js:1549:12)
    at ReflectiveInjector_._throwOrNull (http://localhost:8100/build/main.js:3051:19)
    at ReflectiveInjector_._getByKeyDefault (http://localhost:8100/build/main.js:3090:25)
    at ReflectiveInjector_._getByKey (http://localhost:8100/build/main.js:3022:25)
    at ReflectiveInjector_.get (http://localhost:8100/build/main.js:2891:21)
    at AppModuleInjector.get (ng:///AppModule/module.ngfactory.js:220:79)
    at AppModuleInjector.getInternal (ng:///AppModule/module.ngfactory.js:427:43)
    at AppModuleInjector.NgModuleInjector.get (http://localhost:8100/build/main.js:3855:44)
    at resolveDep (http://localhost:8100/build/main.js:11260:45)
    at createClass (http://localhost:8100/build/main.js:11128:32)
    at createDirectiveInstance (http://localhost:8100/build/main.js:10954:37)
    at createViewNodes (http://localhost:8100/build/main.js:12303:49)
    at createRootView (http://localhost:8100/build/main.js:12208:5)
    at g (http://localhost:8100/build/polyfills.js:3:7133)
    at l (http://localhost:8100/build/polyfills.js:3:6251)
    at http://localhost:8100/build/polyfills.js:3:6805
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15213)
    at Object.onInvokeTask (http://localhost:8100/build/main.js:4415:37)
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15134)
    at n.runTask (http://localhost:8100/build/polyfills.js:3:10390)
    at a (http://localhost:8100/build/polyfills.js:3:5313)
    at HTMLButtonElement.invoke (http://localhost:8100/build/polyfills.js:3:16210)

rapropos · April 17, 2017, 5:33am

(a) RTFM, and scroll all the way down to the bottom where it tells you to add things to the providers stanza of your app module.

(b) Are you absolutely certain you want to use ionic-native’s HTTP instead of Angular’s Http? That is very unusual.

ThunderBirdsX3 · April 17, 2017, 5:40am

(a) Oh thank. I am never add this in Ionic Framework Version: 2.*. I am just update version.

(b) I ever tried that plugin. And i don’t like that.

rapropos · April 17, 2017, 6:54am

Can you explain a bit more about what you are trying to do via http? If it’s “talk to a backend REST interface”, you don’t want the ionic-native HTTP, you want Angular’s Http.

ThunderBirdsX3 · April 17, 2017, 7:15am

Yes, I will talk to a backend REST interface.

If you said Angular’s Http is better than ionic-native HTTP. I would go for it.

Sujan12 · April 17, 2017, 9:24am

It is 100% more suited to solve the problem you have - Native HTTP will only work on devices and be a lot more complicated to handle.

luukschoen · April 17, 2017, 10:25am

The guys already pointed you in the right direction. From what I can tell you accidentely try to import HTTP with capital letters, while should have this as an import statement:

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

you should then change public http: HTTP to public http: Http. Als make sure you’ve imported the Http module into your app.module

bennybriel · April 18, 2017, 2:34pm

luukschoen · April 18, 2017, 2:39pm

Did you add the HTTPModule to your app.module? And did you at the import statement in the right component? And did you declare it inside your constructor? In other words, please show us what you did exactly BTW: this was an isue about http native. If you believe this is the same error, you can keep it over here. If you think this is a different issue, please open up a new issue to keep the topic clean

bennybriel · April 18, 2017, 2:43pm

app.modules.ts
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 { Dashboard } from ‘…/pages/dashboard/dashboard’;
import { MyApp } from ‘./app.component’;
import { HomePage } from ‘…/pages/home/home’;
import { TimerComponent } from “…/components/timer/timer”;
import { HttpModule } from ‘@angular/http’;

@NgModule({
declarations: [
MyApp,
HomePage,
Dashboard,
TimerComponent,
HttpModule

],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
Dashboard,
TimerComponent,
HttpModule
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}

bennybriel · April 18, 2017, 2:45pm

dasboard.ts

import { Component } from ‘@angular/core’;
import { IonicPage, NavController, NavParams,ViewController,AlertController, LoadingController } from ‘ionic-angular’;
import { Injectable } from ‘@angular/core’;
import ‘rxjs/add/operator/map’;
import { Http , Headers, RequestOptions } from “@angular/http”;
import { HttpModule } from “@angular/http”;
import { FormGroup, Validators, FormBuilder } from ‘@angular/forms’;

/**

Generated class for the Dashboard page.
See http://ionicframework.com/docs/components/#navigation for more info
on Ionic pages and navigation.
*/

@IonicPage()
@Component({
selector: ‘page-dashboard’,
templateUrl: ‘dashboard.html’,
})
export class Dashboard {
public data : any;
public city: any;
public state: string;
public artisans: string;
public items:any=[];
public itemy:any=[];
public iteme:any=[];
public form : FormGroup;

public passCode:string;

constructor(public navCtrl: NavController,
public navParams: NavParams,
private alert:AlertController,
private loading:LoadingController,
public http : Http,
public viewCtrl: ViewController,
public fb : FormBuilder)
{
this.data={};
this.data.state="";
this.data.city="";
this.data.artisans="";
this.form = fb.group({
“city” : ["", Validators.required],
“state” : ["", Validators.required],
“artisans” : ["", Validators.required]
});

}
ionViewDidLoad() {
console.log(‘ionViewDidLoad Dashboard’);
}

loadDataCity()
{
let headers = new Headers({‘Content-Type’: ‘application/x-www-form-urlencoded’});
let options = new RequestOptions({ headers: headers });
let linker=“http://localhost/api/getCity.php”;
this.http.get(linker,options)
.map(res => res.json())
.subscribe(data=>{
this.itemy = data;

});

}

SeachNow(){

}
}

luukschoen · April 18, 2017, 2:47pm

Please fix your code, it isn’t really readable like this. But what i already noticed is that you’re import HttpModule over ehre. You should do this inside of your app.module.ts, not in the component itself.

Also your code seems a little bit messy overall. It’s a better design pattern to do these calls from a service/provider, not from within your controller itself.

bennybriel · April 18, 2017, 3:26pm

What I discovered was that ionic2 was updated and as at last this project is working fine.May there is another way to use Http

rapropos · April 18, 2017, 10:18pm

HttpModule needs to be imported, not declared as an entry component.

ryanlogsdon · April 21, 2017, 3:54am

Hi All,

Here’s the solution.

If anyone didn’t get the answer from that Ionic Native doc that was posted earlier … you’re not alone. The answer’s not in there at all. d’oh!

Thanks,
Ryan

Mengwasser · April 27, 2017, 1:52pm

thank you so much! searched ages for this.

alanch · May 4, 2017, 2:15am

Thank you very much for the clarification!!

ryanlogsdon · May 4, 2017, 4:12am

You’re very welcome!

webmaster-leafar · December 28, 2019, 9:20pm

HTTPModule ??? where?

rapropos · December 29, 2019, 6:01am

You’re responding to a three-year-old thread. Nothing in here is still relevant today. There is no more HttpModule.

Topic		Replies	Views
No provider for Http! error in ionic ionic-v3	48	86220	June 13, 2018
Error: No provider for Http! ionic-v3	4	4201	August 7, 2017
Uncaught (in promise): Error: No provider for Http ionic-v3	3	9151	June 13, 2017
(Figured out, no help needed anymore) Uncaught (in promise): Error: StaticInjectorError[HTTP] No provider for HTTP! ionic-v3	1	1345	July 19, 2021
Uncaught (in promise): Error: No provider for ConnectionBackend! ionic-v3	4	2459	May 21, 2017

No provider for HTTP! { HTTP Native}

Related topics