EXCEPTION: No provider for Http! How to solve?


#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)
      );
  }
}

How to access REST services in ionic2?
#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()

],


#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