title: StaticInjectorError(AppModule) Error
body: <p>I only just started learning how to work with Angular 2 and Ionic 3.20.0 but now facing a challenge. I'm trying to display product images in my home page but the app is throwing this error</p>
  
  <blockquote>
    <p>ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[HomePage -> ProductProvider]</p>
  </blockquote>
  
  <p>I have imported the ProductProvider service and added it to providers in my app.module.ts file. </p>
  
  <pre><code>import { ProductProvider } from '../providers/product/product';
  
  @NgModule({
  ...  
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    ProductProvider
  ]
  </code></pre>
  
  <p>Now this is the products.ts and home.ts files respectively</p>
  
  <p>product.ts</p>
  
  <pre><code>import { HttpClient } from '@angular/common/http';
  import { Injectable } from '@angular/core';
  import 'rxjs/add/operator/map';
  
  @Injectable()
  export class ProductProvider {
  
  constructor(public http: HttpClient) {
    console.log('Hello ProductProvider Provider');
  }
  
  getProducts(){
     return this.http.get('/assets/data.json')
       .map(response =&gt; response);
  }
  }
  </code></pre>
  
  <p>home.ts</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { NavController } from 'ionic-angular';
  import { Http } from '@angular/http';
  import "rxjs/add/operator/map";
  import { ProductProvider } from '../../providers/product/product';
  
  @Component({
    selector: 'page-home',
    templateUrl: 'home.html'
  })
  export class HomePage {
  public allProducts = [];
  
  constructor(private productProvide: ProductProvider, private http: Http, 
  public navCtrl: NavController) {
  
  }
  
  ionViewDidLoad(){
      this.productProvide.getProducts()
        .subscribe((response) =&gt; {
      this.allProducts = response;
  });
  }
  }
  </code></pre>
  
  <p>Why is my code throwing this error?</p>