StaticInjectorError(AppModule) 错误答案

【问题标题】：StaticInjectorError(AppModule) ErrorStaticInjectorError(AppModule) 错误
【发布时间】：2018-03-21 22:21:14
【问题描述】：

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

ERROR 错误：未捕获（承诺中）：错误：StaticInjectorError(AppModule)[HomePage -> ProductProvider]

我已导入 ProductProvider 服务并将其添加到我的 app.module.ts 文件中的提供程序。

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

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

【问题讨论】：

标签： angular ionic-framework ionic3

【解决方案1】：

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

ionic g provider <provider_name>

Ionic CLI 将生成所有必要的东西

【讨论】：

ProductProvider 已经存在，并已导入到问题中发布的 home.ts 文件中。尝试在家中使用数据时出现上述错误，但 console.log 不会引发错误
是的，我模拟了错误。实际上，您必须导入 HttpClient 和 HttpHandler 提供程序并添加到 app.module 中。您可以从 '@angular/common/http' 导入并将其添加到提供程序中。它对我有用。希望对您有所帮助！
感谢您的努力。在那里发布我的解决方案

【解决方案2】：

我没有在 ProductProvider 的 getProducts() 方法中指定返回的类型，所以 http 客户端认为它是一个正在返回的对象并导致错误。我可以通过将 any[] 添加到 http get 来解决它，就像这样return this.http.get<any[]>('/assets/data.json')

【讨论】：