title: Ionic 2 Providers
body: <p>I am upgrading my app from <code>Ionic 2.0.0-beta.20</code> to <code>Ionic 2.0.0-rc.3</code> using <a href="https://github.com/driftyco/ionic/blob/master/CHANGELOG.md#user-content-200-rc0-2016-09-28" rel="nofollow noreferrer">this guide</a>.</p>
  
  <p>I have an issue regarding a <code>provider</code> called <code>RatingService</code>, which I am a little confused about, if anyone can assist, I would appreciate it.</p>
  
  <p><strong>Problem</strong></p>
  
  <p>I get the following error in <code>app.module.ts</code>.</p>
  
  <pre><code>[ts] Argument of type '{ declarations: any[]; imports: ModuleWithProviders[]; bootstrap: typeof IonicApp[]; entryCompone...' is not assignable to parameter of type 'NgModule'.
         Types of property 'providers' are incompatible.
           Type '{ provide: typeof ErrorHandler; useClass: typeof IonicErrorHandler; RatingService: typeof RatingS...' is not assignable to type 'Provider[]'.
             Type '{ provide: typeof ErrorHandler; useClass: typeof IonicErrorHandler; RatingService: typeof RatingS...' is not assignable to type 'Provider'.
               Object literal may only specify known properties, and 'RatingService' does not exist in type 'Provider'.
  </code></pre>
  
  <p>I think I need to make use of <code>provide:</code> and <code>useClass:</code> for each <code>provider</code>, but I'm not sure what these values should be?</p>
  
  <p><strong>Code</strong></p>
  
  <p><strong>app.module.ts</strong></p>
  
  <pre><code>  import { RatingService } from '../pages/service/ratingService';
      ...
    providers: [{ provide: ErrorHandler, 
      useClass: IonicErrorHandler, 
      RatingService,
      JobService, 
      UtilityService, 
      ...
  </code></pre>
  
  <p><strong>ratingService.ts</strong></p>
  
  <pre><code>import { Injectable, Inject } from "@angular/core";
  import { RatingModel } from '../model/RatingModel';
  import { NavController } from 'ionic-angular';
  import { Http, Headers } from "@angular/http"
  import { ParentService } from "../service/parentService";
  import 'rxjs/add/operator/map';
  
  @Injectable()
  export class RatingService extends ParentService {
  
      public BASE_URI: String = super.getBaseUrl()+'/rating';
  
      public http: Http = null;
  
      constructor( @Inject(Http) http: Http) {
          super();
          this.http = http;
      }
  
      getRatingRange(firstResult: number, maxResults: number): Promise&lt;RatingModel[]&gt; {
          return new Promise&lt;RatingModel[]&gt;(resolve =&gt; {
              this.getRatingRangeHttpCall(firstResult, maxResults).subscribe(
                  data =&gt; {
                      var ratingModels: RatingModel[] = [];
                      for (var index = 0; index &lt; data.length; index++) {
                          var element = data[index];
                          ratingModels.push(element);
                      }
                      resolve(ratingModels);
                  },
                  error =&gt; alert('RatingRangeDataPromise(' + firstResult + ', ' + maxResults + ') Data not available. Please try again.\n' + error),
                  () =&gt; {
                  });
          });
      }
  
      getRatingForJobRange(firstResult: number, maxResults: number, jobId: number): Promise&lt;RatingModel[]&gt; {
          return new Promise&lt;RatingModel[]&gt;(resolve =&gt; {
              this.getRatingRangeForJobHttpCall(firstResult, maxResults, jobId).subscribe(
                  data =&gt; {
                      var ratingModels: RatingModel[] = [];
                      for (var index = 0; index &lt; data.length; index++) {
                          var element = data[index];
                          ratingModels.push(element);
                      }
                      resolve(ratingModels);
                  },
                  error =&gt; alert('RatingForJobRange(' + firstResult + ', ' + maxResults + ', ' + jobId + ') Data not available. Please try again.\n' + error),
                  () =&gt; {
                  });
          });
      }
  
      saveRating(ratingModel: RatingModel): Promise&lt;RatingModel&gt; {
          return new Promise&lt;RatingModel&gt;(resolve =&gt; {
              this.saveRatingHttpCall(ratingModel).subscribe(
                  data =&gt; {
                      resolve(data);
                  },
                  error =&gt; alert('Save Unsuccesfull.\n' + error),
                  () =&gt; {
  
                  });
          });
      }
  
      getRating(id: number): Promise&lt;RatingModel&gt; {
          return new Promise&lt;RatingModel&gt;(resolve =&gt; {
              this.getRatingHttpCall(id).subscribe(
                  data =&gt; {
                      resolve(data);
                  },
                  error =&gt; alert('getRating Data not available. Please try again.\n' + error),
                  () =&gt; {
                      //console.log("Finished getRating");
                  });
          });
      }
  
      public getRatingRangeHttpCall(firstResult: number, maxResults: number) {
          return this.http.get(this.BASE_URI + '/list/range/' + firstResult + '/' + maxResults)
              .map(res =&gt; res.json());
      }
  
      public getRatingRangeForJobHttpCall(firstResult: number, maxResults: number, jobId: number) {
          return this.http.get(this.BASE_URI + '/list/range/' + firstResult + '/' + maxResults + '/' + jobId)
              .map(res =&gt; res.json());
      }
  
      public saveRatingHttpCall(ratingModel: RatingModel) {
          var headers = new Headers();
          headers.append('Accept', 'application/json');
          headers.append('Content-Type', 'application/json');
          return this.http.post(this.BASE_URI + '/save', ratingModel, {
              headers: headers
          })
              .map(res =&gt; res.json());
      }
  
      public getRatingHttpCall(id: number) {
          return this.http.get(this.BASE_URI + '/list/' + id)
              .map(res =&gt; res.json());
      }
  
  }
  </code></pre>
  
  <p><strong>parentService.ts</strong></p>
  
  <pre><code>import { Injectable, Inject } from "@angular/core";
  
  @Injectable()
  export class ParentService {
  
      public PARENT_BASE_URI: string = 'http://localhost:8080/jbosswildfly';
      //public PARENT_BASE_URI: string = 'http://jbosswildfly-easypeasy.rhcloud.com';
  
      constructor() {
  
      }
  
      public getBaseUrl(): string {
          return this.PARENT_BASE_URI;
      }
  }
  </code></pre>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I have changed the code to the following, I will test it to see if it works:</p>
  
  <pre><code>  providers: [
      { provide: ErrorHandler, useClass: IonicErrorHandler}, 
      { provide: RatingService, useClass: RatingService}, 
      { provide: JobService, useClass: JobService}, 
      { provide: UtilityService, useClass: UtilityService}
    ]
  </code></pre>