No provider for Http - ionic2 alpha 42

I upgraded ionic from alpha40 to alpha42 and I’m getting this error when trying to use Http.
"Exception: No Provider for Http!"
The code is the following:

import {IonicApp} from 'ionic/ionic';
import {Injectable} from 'angular2/angular2';
import {Http} from 'angular2/http';

@Injectable()
export class AppData {
    constructor(app: IonicApp, http: Http) {
        this.app = app;
        // inject the Http provider and set to this instance
        this.http = http;
    }

My ionic info:

Your system information:

Cordova CLI: 5.4.1
Gulp version:  CLI version 3.9.0
Gulp local:   Local version 3.9.0
Ionic Version: 2.0.0-alpha.42
Ionic CLI Version: 2.0.0-beta.11
Ionic App Lib Version: 2.0.0-beta.5
OS: Distributor ID:	Ubuntu Description:	Ubuntu 15.10 
Node Version: v4.0.0

Does anyone know how to solve this problem?

Can you try with this?:

import {Http, Headers} from 'angular2/http';
@Injectable()
export class AppData {
  constructor(private http: Http) {
  }
}

If not working then it is an issue with the update or you may need to update the npm packages as this should come from angular2 and not from ionic (i think), have you tried to search http in angular 2 package in node_modules?

Hey how did you update, when i tried it trow a lot of unmet peer dependency errors, did you update each one of them? did you do it global or local in project?

Same error with headers and private http: Http. I have angular2 alpha52 installed.
I simply followed the guide provided in the https://github.com/driftyco/ionic2/blob/master/CHANGELOG.md to update to the latest alpha.

Yeah, no luck, updating the CLI gives me errors too.
Update: Ok fixed CLI but ionic-framework still says that angular2@2.0.0-alpha.52 peer dependency wasn’t installed.

Just declare it in your package.json file:

"dependencies": {
    "angular2": "2.0.0-alpha.52",
    ...
 }

and run npm update

Already did, along with:

npm i es6-promise@^3.0.2 es6-shim@^0.33.3 reflect-metadata@0.1.2 rxjs@5.0.0-alpha.14 zone.js@0.5.8 angular2@2.0.0-alpha.52 --save

But now when running ionic serve -s -c i get errror:

Module not found: Error: Cannot resolve module ‘web-animations.min’ in ‘/…/appFolder’

I’m starting to hate peer dependencies.

With no other option i have to create a new project and pass the app folder to the new one, as the update started using gulp again and other changes that isn’t worth cherry copying from the starter to my app.

Yeah I know what you mean :sweat:.
However now the Http module is working, maybe it was just a dependencies problem due to the update. Now I’ve updated everything using the conference app project: https://github.com/driftyco/ionic-conference-app/ and it seems to work.
Thanks!

Now is my http which is broken, it doesn’t seems to even make the request, did it change the way http.post() works?
does it still needs to append http header for aplication/json and JSON.stringify(json) for the data?

Hey have you used the http for getting data from web api? the one i had working before the update doesn’t work any more.

Actually I have yet to try it on web requests. For now I’m only getting data from local json files.

I made it, it’s working now but some functions had to be removed (retry, timeout, delay, map):

  headers.append('Content-Type', 'application/json');
  this.http.post(url, JSON.stringify(json), {headers: headers})
    // .retry(2)
    // .timeout(10000, new Error('Tiempo de espera alcanzado.'))
    // .delay(10)
    // .map((res) => res.json())
    .subscribe(
      (data) => resolve(data.json()),
      (err) => reject(err)
    );

Great! I will try this solution!
I have another question: do you know how to use cordova plugins with ionic2? I’m trying to call them from Platform.ready() as in ionic1 but they are undefined.

Did you used cordova plugin add plugin.name, ex: cordova plugin add cordova-plugin-geolocation?

After that step most of the plugins will have their own instructions for use, ex for the former geolocation plugin:
navigator.geolocation.getCurrentPosition(onSuccess, onError);

After installing most of them should be available either in window.plugins or navigator variables.

SideNote: In ionic 1 there was ngCordova but idk if it can be used in ionic 2, most likely not.

SideNote2: Check this link to another forum about ngCordova, will clear a few questions: Ionic 2 with ng-cordova

I’m using the globalization plugin, and I installed it using ionic plugin add cordova-plugin-globalization. But I cannot access it:

platform.ready.then(() => {
    console.log(navigator.globalization); // undefined
})

Maybe I should try using “cordova plugin add” instead of “ionic plugin add”.

Try this 4:

  1. See if that functionality isn’t already provided by the ionic bundle (i think localization could be) and import it, for example the sqlStorage is provided by ionic 2 even if it’s a cordova plugin, and it has to be installed with the command, be it the cordova or the ionic.
  2. Replace navigator for window.Plugin to see if the plugin was installed in different variable.
  3. Try installing with the cordova command instead of the ionic one and test your log and with #2 too.
  4. Reach staff (can’t help more than that).

The functionality that I’m trying to achieve is to get the device language in order to show the correct translation. I haven’t seen such a functionality in ionic 2 docs. Thanks for the help however!