Angular StaticInjectorError（AppModule）错误

我刚刚开始学习如何使用Angular 2和Ionic 3.20.0，但现在面临一个挑战。我正在尝试在主页中显示产品图像，但应用程序抛出此错误

错误：未捕获（承诺中）：错误：StaticInjectorError（AppModule）[主页->产品提供程序]

我已导入ProductProvider服务并将其添加到我的app.module.ts文件中的providers

import { ProductProvider } from '../providers/product/product';

@NgModule({
...  
providers: [
  StatusBar,
  SplashScreen,
  {provide: ErrorHandler, useClass: IonicErrorHandler},
  ProductProvider
]

现在分别是products.ts和home.ts文件

product.ts

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 => response);
}
}

home.ts

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) => {
    this.allProducts = response;
});
}
}

---

为什么我的代码会抛出此错误？

您可以使用以下命令生成提供程序：

ionic g provider <provider_name>

ionic g提供者

---

Ionic CLI将生成所有必要的内容

我没有在ProductProvider的getProducts（）方法中指定返回的类型，因此http客户端假定返回的是一个对象，这是导致错误的原因。我可以通过向http get添加任何[]来修复它，如下所示

返回this.http.get（'/assets/data.json'）

ProductProvider已存在，并已导入到home.ts文件中，如问题中所述。我在尝试使用home中的数据时遇到了上述错误，但console.log不会抛出错误是的，我模拟了错误。实际上，您必须导入HttpClient和HttpHandler提供程序以及附加模块app.module。您可以从“@angular/common/http”导入并将其添加到提供程序中。这对我有用。希望有帮助！感谢你的努力。把我的解决方案贴在下面