EXCEPTION: No provider for Http! How to solve?

Ionic Framework ionic-v3
1

Hello guys! I’m developing one app with ionic 2, but I’m stucked with this error when I try to make an http request… And I don’t know what is causing it…

Look at my js:

app.js

import {App, IonicApp, Platform, Modal} from 'ionic/ionic';
import { LoginPage } from './login-page/loginPage';
import { VamosComecarPage } from './vamos-comecar/vamos-comecar';
import { SplashPage } from './splash/splash';
import { NotificacoesUsuarioPage } from './notificacoes-usuario/notificacoes-usuario';
import { CalendarioEventosPage } from './calendario-eventos/calendario-eventos';

@App({
template: '<ion-nav [root]="root"></ion-nav>',
providers: [App]
})

class MyApp {
constructor(app: App, ionicApp: IonicApp, platform: Platform, modal: Modal) {
	this.app = app;
	this.platform = platform;

	this.initializeApp();

	this.root = SplashPage;
}

initializeApp() {
	this.platform.ready().then(() => {
  		console.log('Platform ready');
	});
}	
}

cadastro.js:

import { Page, Modal, NavController } from 'ionic/ionic';
import { VamosComecarPage } from '../vamos-comecar/vamos-comecar';
import { ConfirmacaoCadastroModal } from '../modal-confirmacao-cadastro/modal-confirmacao-cadastro';
import {Component, CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/angular2';
import { Student } from '../common/student';
import {Http, Headers, HTTP_PROVIDERS} from 'angular2/http';


@Page({
templateUrl: 'app/cadastro/cadastro.html',
})

export class CadastroPage {
model = new Student('', '', '');

constructor( nav: NavController, modal: Modal, http: Http ) {
	this.nav = nav;
	this.modal = modal;
	this.http = http;
}

onSubmit(){
	console.log('CHAMOU SUBMIT ' + this.model.name);
	this.http.get('http://jsonplaceholder.typicode.com/posts/1')
  .map(res => res.json())
  .subscribe(data => {
  console.log(data)
  });

getRandomQuote() {	
  this.http.get('http://jsonplaceholder.typicode.com/posts/1')
  .map(res => res.json())
  .subscribe(data => {
 console.log(data)
 });

showModal() {
	this.modal.open( ConfirmacaoCadastroModal );
}

get diagnostic() { return JSON.stringify(this.model); }
}

The error occours when I try to acces the cadastro.html page…

Look the stacktrace:

EXCEPTION: No provider for Http! (CadastroPage -> Http) app.bundle.js:48505 EXCEPTION: No provider for Http! (CadastroPage -> Http)BrowserDomAdapter.logError @ app.bundle.js:48505BrowserDomAdapter.logGroup @ app.bundle.js:48515ExceptionHandler.call @ app.bundle.js:26307(anonymous function) @ app.bundle.js:49587NgZone._notifyOnError @ app.bundle.js:40195errorHandling.onError @ app.bundle.js:40093run @ app.bundle.js:3587(anonymous function) @ app.bundle.js:40108zoneBoundFn @ app.bundle.js:3557promiseReactionJob @ app.bundle.js:1930(anonymous function) @ app.bundle.js:1943Item.run @ app.bundle.js:3434drainQueue @ app.bundle.js:3404cb @ app.bundle.js:40166arguments.(anonymous function) @ app.bundle.js:4084(anonymous function) @ app.bundle.js:3564run @ app.bundle.js:3584(anonymous function) @ app.bundle.js:40108zoneBoundFn @ app.bundle.js:3557 app.bundle.js:48505 STACKTRACE:BrowserDomAdapter.logError @ app.bundle.js:48505ExceptionHandler.call @ app.bundle.js:26309(anonymous function) @ app.bundle.js:49587NgZone._notifyOnError @ app.bundle.js:40195errorHandling.onError @ app.bundle.js:40093run @ app.bundle.js:3587(anonymous function) @ app.bundle.js:40108zoneBoundFn @ app.bundle.js:3557promiseReactionJob @ app.bundle.js:1930(anonymous function) @ app.bundle.js:1943Item.run @ app.bundle.js:3434drainQueue @ app.bundle.js:3404cb @ app.bundle.js:40166arguments.(anonymous function) @ app.bundle.js:4084(anonymous function) @ app.bundle.js:3564run @ app.bundle.js:3584(anonymous function) @ app.bundle.js:40108zoneBoundFn @ app.bundle.js:3557 app.bundle.js:48505 Error: DI Exception at NoProviderError.BaseException [as constructor] (app.bundle.js:26188) at NoProviderError.AbstractProviderError [as constructor] (app.bundle.js:26870) at new NoProviderError (app.bundle.js:26906) at Injector._throwOrNull (app.bundle.js:25235) at Injector._getByKeyDefault (app.bundle.js:25286) at Injector._getByKey (app.bundle.js:25226) at Injector._getByDependency (app.bundle.js:25212) at Injector._instantiate (app.bundle.js:25106) at Injector._instantiateProvider (app.bundle.js:25095) at Injector._new (app.bundle.js:25084)

What I’m doing wrong?

Thanks!

2

@Page({
templateUrl: ‘app/cadastro/cadastro.html’,
providers: [Http]
})

3

Thanks for the answer, i put this, and now I get this error:
EXCEPTION: No provider for ConnectionBackend! (CadastroPage → Http → ConnectionBackend)…

And look at the conference app, they don’t use providers: [http]…

5

Hi @victorcarvalhosp, did you solve this issue because I have the same error basically and I have not found how to solve it. I have also included : providers:[Http] but I also still get the same error:
PlayersPage -> Http -> ConnectionBackend!

I have also checked the conference-app on github and did not find something to help with the issue…

Thanks.

6

This works for me…

import { Page } from 'ionic/ionic';
import { Http, Headers } from 'angular2/http';
// NEEDED TO MAKE MAP ON HTTP WORK!!
import 'rxjs/add/operator/map';


@Page({
  templateUrl: 'build/pages/home/home.html',
})
export class HomePage {

  /**
  * inject the HTTP service into the component
  */
  constructor(http: Http) {
    this.http = http
    this.getRandomUser()
  }

  /**
   * gets user using random.me api
   */
  getRandomUser() {
    this.http.get('https://randomuser.me/api/')
      .map(res => res.json()) // convert json
      .subscribe(
        data => this.randomUser = data.results[0].user,
        err => console.log('Random User', err)
      );
  }
}
3 Likes
7

Thanks a lot @aaronksaunders, It works like a charm!!. I had to enable CORS on my local dev server in order to see responses in the browser but other than that It’s perfect.

I was also wondering whether you have used the IONIC 2 STARTER with --ts flags in order to use Typescript and If so, how did you manage to stop your “IDE” from displaying errors in the entire project… I have tried it in Visual Code and Atom by specifying the taget as “ES6 in the tsconfigjson file” but It still does not change anything. So I am currently using the default which generates js files. And I would really like to use Typescript rather than ES2015.

Anyway I appreciate that you took time to help with that bug even with Chrismas so close, so Thanks.

8

this is a project that I have set up that works fine in atom with none of the errors you mentioned https://github.com/aaronksaunders/ionic2-ts-sample

9

You need two other providers: ConnectionBackend and HTTP_PROVIDERS.

So:
import {Http, ConnectionBackend, HTTP_PROVIDERS} from 'angular2/http';

And:
@App({ providers: [Http, ConnectionBackend, HTTP_PROVIDERS] })

No need for the rxjs if you don’t use map.

10

Or just look at here:
https://angular.io/docs/ts/latest/guide/server-communication.html

Just need to add HttpModule and Jsonp in import

11

Most likely you have upgraded to Ionic3 without realizing it.

You can tell for sure if you are on ionic3 if your package.json has the versions listed below or higher:

 "dependencies": {
    "@angular/common": "4.0.0",
    "@angular/compiler": "4.0.0",
    "@angular/compiler-cli": "4.0.0",
    "@angular/core": "4.0.0",
    "@angular/forms": "4.0.0",
    "@angular/http": "4.0.0",
    "@angular/platform-browser": "4.0.0",
    "@angular/platform-browser-dynamic": "4.0.0",
    "@ionic-native/core": "3.4.2",
    "@ionic-native/splash-screen": "3.4.2",
    "@ionic-native/status-bar": "3.4.2",
    "@ionic/storage": "2.0.1",
    "ionic-angular": "3.0.1",
    "ionicons": "3.0.0",
    "rxjs": "5.1.1",
    "sw-toolbox": "3.4.0",
    "zone.js": "^0.8.4"
  },

See the steps to upgrade at https://github.com/driftyco/ionic/releases/tag/v3.0.0

12

My solution was to add in app.module.ts


import { IonicStorageModule } from '@ionic/storage';

Then always import it into app.module.ts: 


 imports: [
    IonicModule.forRoot(MyApp),

HttpModule,
BrowserModule,
IonicStorageModule.forRoot()



],
3 Likes
13

Thanks man, that worked out for me! :slight_smile:

I have just imported import {HttpModule} from '@angular/http' in app.module.ts
and then added it into imports array in @NgModule

2 Likes