No provider for HTTP! { HTTP Native}


#1

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)

#2

(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.


#3

(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.


#4

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.


HTTP Post Request
#5

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.


#6

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.


#7

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


#8

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:1585:86) at noProviderError (http://localhost:8100/build/main.js:1623:12) at ReflectiveInjector_.throwOrNull (http://localhost:8100/build/main.js:3125:19) at ReflectiveInjector.getByKeyDefault (http://localhost:8100/build/main.js:3164:25) at ReflectiveInjector.getByKey (http://localhost:8100/build/main.js:3096:25) at ReflectiveInjector.get (http://localhost:8100/build/main.js:2965:21) at AppModuleInjector.NgModuleInjector.get (http://localhost:8100/build/main.js:3930:52) at resolveDep (http://localhost:8100/build/main.js:11334:45) at createClass (http://localhost:8100/build/main.js:11202:32) at createDirectiveInstance (http://localhost:8100/build/main.js:11028:37) at createViewNodes (http://localhost:8100/build/main.js:12377:49) at createRootView (http://localhost:8100/build/main.js:12282:5) at callWithDebugContext (http://localhost:8100/build/main.js:13413:42) at Object.debugCreateRootView [as createRootView] (http://localhost:8100/build/main.js:12874:12)
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:1585:86)
at noProviderError (http://localhost:8100/build/main.js:1623:12)
at ReflectiveInjector_.throwOrNull (http://localhost:8100/build/main.js:3125:19)
at ReflectiveInjector
.getByKeyDefault (http://localhost:8100/build/main.js:3164:25)
at ReflectiveInjector
.getByKey (http://localhost:8100/build/main.js:3096:25)
at ReflectiveInjector
.get (http://localhost:8100/build/main.js:2965:21)
at AppModuleInjector.NgModuleInjector.get (http://localhost:8100/build/main.js:3930:52)
at resolveDep (http://localhost:8100/build/main.js:11334:45)
at createClass (http://localhost:8100/build/main.js:11202:32)
at createDirectiveInstance (http://localhost:8100/build/main.js:11028:37)
at createViewNodes (http://localhost:8100/build/main.js:12377:49)
at createRootView (http://localhost:8100/build/main.js:12282:5)
at callWithDebugContext (http://localhost:8100/build/main.js:13413:42)
at Object.debugCreateRootView [as createRootView] (http://localhost:8100/build/main.js:12874:12)
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:4489: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 invoke (http://localhost:8100/build/polyfills.js:3:16210)
at e (http://localhost:8100/build/polyfill


#9

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 :slight_smile: 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


#10

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


#11

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’;

/**

@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(){

}
}


#12

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.


#13

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


#14

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


#15

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


#16

thank you so much! searched ages for this.


#17

Thank you very much for the clarification!!


#18

You’re very welcome!