Make a request in provider


#1

hi,

I’m using Ionic2 and try a lot of tutorials without success.
I have a register page

<form (submit)="register()">
    <ion-list>
      <ion-item>
        <ion-label fixed>EMAIL</ion-label>
        <ion-input type="email" [(ngModel)]="user.email" name="email"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label fixed>PASSWORD</ion-label>
        <ion-input type="password" [(ngModel)]="user.password" name="password"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label fixed>STREET</ion-label>
        <ion-input type="text" [(ngModel)]="user.street" name="street"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label fixed>ZIPCODE</ion-label>
        <ion-input type="text" [(ngModel)]="user.zipcode" name="zipcode"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label fixed>PHONE</ion-label>
        <ion-input type="text" [(ngModel)]="user.phone" name="phone"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label fixed>MOBILE</ion-label>
        <ion-input type="text" [(ngModel)]="user.mobile" name="mobile"></ion-input>
      </ion-item>
      <div padding>
        <button ion-button color="primary" block>Register</button>
      </div>
    </ion-list>
  </form>

Here is my provider:

import { Injectable } from ‘@angular/core’;
import { Http } from ‘@angular/http’;
import ‘rxjs/add/operator/map’;

/*
Generated class for the User provider.

See https://angular.io/guide/dependency-injection for more info on providers
and Angular DI.
*/
@Injectable()
export class UserProvider {
useritem: any;
constructor(public http: Http) {
console.log(‘Hello User Provider’);
}

getUserByID(id: string) {
this.useritem = null;

var url = "http://resteasyshop.be/userrestservice.svc/GetUser/" + id;
var response = this.http.get(url);// = this.http.get(url).map(res => res.json());

//this.http.get(url).subscribe(data => {
//  response = data.json();
//},
//  error => {
//    response = error.json();
//  });
console.log("response:" + response);

}
}
I registred it in app.module.ts
In my page i imported it too: import { UserProvider } from ‘…/…/Providers/User/User’;

In the constructor when i want to pass an object of UserProvider

constructor(public navCtrl: NavController, public navParams: NavParams, public userProvider: UserProvider ) {
    console.log('loadRegister');
    //this.user = this.userProvider.getUserByID("0");// this.navParams.get('user');
    //console.log("test:"+this.user);
  }

I get back this error:

Error: Encountered undefined provider! Usually this means you have a circular dependencies (might be caused by using ‘barrel’ index.ts files.
at syntaxError (http://localhost:8100/build/vendor.js:75153:34)
at http://localhost:8100/build/vendor.js:90292:40
at Array.forEach ()
at CompileMetadataResolver._getProvidersMetadata (http://localhost:8100/build/vendor.js:90277:19)
at CompileMetadataResolver.getNgModuleMetadata (http://localhost:8100/build/vendor.js:89847:50)
at JitCompiler._loadModules (http://localhost:8100/build/vendor.js:108171:87)
at JitCompiler._compileModuleAndComponents (http://localhost:8100/build/vendor.js:108132:36)
at JitCompiler.compileModuleAsync (http://localhost:8100/build/vendor.js:108048:37)
at CompilerImpl.compileModuleAsync (http://localhost:8100/build/vendor.js:73989:49)
at PlatformRef.bootstrapModule (http://localhost:8100/build/vendor.js:5796:25)

In all tutorials it seems really easy but i guess i did a mistake