Http provider Error Ionic 3

Question

I'm getting a error that I have no idea how to fix. I already search for solutions, but they didn't help me.

It's all about make a HTTP request using Ionic Native Http, both GET and POST.

The Error: It's look like I'm not setting the HTTP provider, but in the app.module.ts I'm importing it

    ERROR Error: Uncaught (in promise): Error: No provider for HTTP!
    Error: No provider for HTTP!
        at injectionError (vendor.js:1590)
        at noProviderError (vendor.js:1628)
        at ReflectiveInjector_._throwOrNull (vendor.js:3129)
        at ReflectiveInjector_._getByKeyDefault (vendor.js:3168)
        at ReflectiveInjector_._getByKey (vendor.js:3100)
        at ReflectiveInjector_.get (vendor.js:2969)
        at AppModuleInjector.get (ng:///AppModule/module.ngfactory.js:240)
        at AppModuleInjector.getInternal (ng:///AppModule/module.ngfactory.js:365)
        at AppModuleInjector.NgModuleInjector.get (vendor.js:3936)
        at resolveDep (vendor.js:11398)
        at injectionError (vendor.js:1590)
        at noProviderError (vendor.js:1628)
        at ReflectiveInjector_._throwOrNull (vendor.js:3129)
        at ReflectiveInjector_._getByKeyDefault (vendor.js:3168)
        at ReflectiveInjector_._getByKey (vendor.js:3100)
        at ReflectiveInjector_.get (vendor.js:2969)
        at AppModuleInjector.get (ng:///AppModule/module.ngfactory.js:240)
        at AppModuleInjector.getInternal (ng:///AppModule/module.ngfactory.js:365)
        at AppModuleInjector.NgModuleInjector.get (vendor.js:3936)
        at resolveDep (vendor.js:11398)
        at c (polyfills.js:3)
        at Object.reject (polyfills.js:3)
        at NavControllerBase._fireError (vendor.js:43003)
        at NavControllerBase._failed (vendor.js:42991)
        at vendor.js:43046
        at t.invoke (polyfills.js:3)
        at Object.onInvoke (vendor.js:4508)
        at t.invoke (polyfills.js:3)
        at r.run (polyfills.js:3)
        at polyfills.js:3

The code:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';
import { CadastroPage } from '../pages/cadastro/cadastro';

import { ApiService } from '../services/api.service';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({
    declarations: [
        MyApp,
        HomePage,
        ListPage,
        CadastroPage
    ],
    imports: [
        BrowserModule,
        HttpModule,
        IonicModule.forRoot(MyApp)
    ],
    bootstrap: [IonicApp],
         entryComponents: [
         MyApp,
         HomePage,
         ListPage,
         CadastroPage
     ],
     providers: [
         ApiService,
         StatusBar,
         SplashScreen,
         {provide: ErrorHandler, useClass: IonicErrorHandler}
     ]
})
export class AppModule {}

api.service.ts

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

@Injectable()
export class ApiService {

    constructor (private http: HTTP) { }

    private apiUrl = '<VALID_URL>';

    get() {
        // Some OK http request here!
    }
}

packaje.json

{
        "name": "app",
        "version": "0.0.1",
        "author": "Ionic Framework",
        "homepage": "http://ionicframework.com/",
        "private": true,
        "scripts": {
        "clean": "ionic-app-scripts clean",
        "build": "ionic-app-scripts build",
        "lint": "ionic-app-scripts lint",
        "ionic:build": "ionic-app-scripts build",
        "ionic:serve": "ionic-app-scripts serve"
    },
        "dependencies": {
        "@angular/common": "4.1.3",
        "@angular/compiler": "4.1.3",
        "@angular/compiler-cli": "4.1.3",
        "@angular/core": "4.1.3",
        "@angular/forms": "4.1.3",
        "@angular/http": "4.1.3",
        "@angular/platform-browser": "4.1.3",
        "@angular/platform-browser-dynamic": "4.1.3",
        "@ionic-native/core": "3.12.1",
        "@ionic-native/http": "^4.1.0",
        "@ionic-native/splash-screen": "3.12.1",
        "@ionic-native/status-bar": "3.12.1",
        "@ionic/storage": "2.0.1",
        "cordova-android": "^6.2.3",
        "cordova-plugin-console": "1.0.5",
        "cordova-plugin-device": "1.1.4",
        "cordova-plugin-splashscreen": "~4.0.1",
        "cordova-plugin-statusbar": "2.2.2",
        "cordova-plugin-whitelist": "1.3.1",
        "ionic-angular": "3.5.3",
        "ionic-plugin-keyboard": "~2.2.1",
        "ionicons": "3.0.0",
        "rxjs": "5.4.0",
        "sw-toolbox": "3.6.0",
        "zone.js": "0.8.12"
    },
        "devDependencies": {
        "@ionic/app-scripts": "2.0.2",
        "@ionic/cli-plugin-cordova": "1.5.0",
        "@ionic/cli-plugin-ionic-angular": "1.4.0",
        "ionic": "3.6.0",
        "typescript": "2.3.4"
    },
        "description": "An Ionic project",
        "cordova": {
            "plugins": {
                "cordova-plugin-console": {},
                "cordova-plugin-device": {},
                "cordova-plugin-splashscreen": {},
                "cordova-plugin-statusbar": {},
                "cordova-plugin-whitelist": {},
                "ionic-plugin-keyboard": {}
            },
            "platforms": [
                "android"
            ]
        }
    }

Answer 1

In your APIService do this

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

@Injectable()
export class ApiService {

    constructor (private http: Http) { }

    private apiUrl = '<VALID_URL>';

    get() {
        // Some OK http request here!
    }
}

Your error probably comes from this line

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

But you imported the module from @angular/http !

Answer 2

I had the same error and I add the module in the providers array like this :

...

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { HTTP } from '@ionic-native/http';

...

providers: [
    StatusBar,
    SplashScreen,
    HTTP,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]

...

Hope it's will help

Answer 3

I Had the same error with ionic3. To solve this error, add HTTP in providers

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

...

providers: [
    StatusBar,
    SplashScreen,
    HTTP,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
]