ionic 4 NullInjectorError: No provider for HTTP!

[ibakhsh]

The issue:

> NullInjectorError: No provider for HTTP!

steps to reproduce: 1-create a test project for ionic4:

ionic start ionic4-test sidemenu --type=angular

2-add the advanced http to the project: from link

ionic cordova plugin add cordova-plugin-advanced-http
npm install @ionic-native/http

3-add the android or ios platform to test the plugin:

ionic cordova platform add android

4- replace the in home.page.html with this:

<ion-button (click)="httpGet()">
      Test HTTP
    </ion-button>

5- replace home.page.ts to be like this:

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

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor(
    private http: HTTP
  ) 
  {
    this.http.get('http://ionic.io', {}, {})
    .then(data => {

      console.log(data.status);
      console.log(data.data); // data received by server
      console.log(data.headers);

    })
    .catch(error => {

      console.error(error.status);
      console.error(error.error); // error message as string
      console.error(error.headers);

    });
  }
}

4-run the page to test the plugin usage:

ionic cordova run android 

[pablo-fior-korbantech]

Add "import { HTTP } from '@ionic-native/http/ngx';" on your app.module.ts then add "HTTP" on the providers array

[silkimen]

Hi Ibrahim, this is not an issue related to this project. Please file an issue at ionic-native if Pablo's suggestion doesn't fix your problem.

[silkimen]

Closing this, feel free to open a new issue, if this won't solve your problem!

[bcrigler]

Well for me adding HTTP to the Providers array doesn't even work. I will file an issue with ionic-native but capacitor is a broken mess, which is why they now released capacitor 2.0 and are working to create a plugin similar to this one.

Error: Invalid provider for the NgModule 'AppModule' - only instances of Provider and Type are allowed, got: [AuthGuardService, JwtHelperService, GoogleImageSearch, GifSearchService, LocalNotifications, ScreenOrientation, BackgroundMode, NativeAudio, Facebook, ?[object Object]?, ...]
    at syntaxError (compiler.js:2420)
    at compiler.js:21376
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getProvidersMetadata (compiler.js:21344)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata (compiler.js:21062)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._loadModules (compiler.js:27117)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:27098)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler.compileModuleAsync (compiler.js:27058)
    at CompilerImpl.push../node_modules/@angular/platform-browser-dynamic/fesm5/platform-browser-dynamic.js.CompilerImpl.compileModuleAsync (platform-browser-dynamic.js:143)
    at compileNgModuleFactory__PRE_R3__ (core.js:27089)
capacitor.handleError @ capacitor-runtime.js:358

[Brendan92]

Hi @bcrigler, have you solved this? I'm sitting with the same issue...