Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ionic 4 NullInjectorError: No provider for HTTP!

See original GitHub issue

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 <ion-content> 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

Issue Analytics

State:
Created 5 years ago
Reactions:2
Comments:5 (2 by maintainers)

Top GitHub Comments

10reactions

pablo-fior-korbantechcommented, Feb 12, 2019

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

1reaction

bcriglercommented, Apr 17, 2020

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