angular - Http 提供商错误 Ionic 3

Question

我收到一个错误，我不知道如何修复。我已经在寻找解决方案，但它们对我没有帮助。

这一切都是关于使用 Ionic Native Http 发出 HTTP 请求，包括 GET 和 POST。

错误:看起来我没有设置 HTTP 提供程序，但在 app.module.ts 中我正在导入它

    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

代码:

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

在您的 APIService 中执行此操作

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

你的错误可能来自这一行

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

但是你从 @angular/http 导入了模块!