Angular 2中JSON数据加载失败，报ProcessJsonService无提供者错误求助

你的控制台报错已经明确指出了问题核心：Angular的依赖注入系统找不到ProcessJsonService的提供者，这是Angular开发中非常常见的配置疏漏，下面是具体的解决步骤：

问题根源 #

Angular的服务不会自动被注入到组件中，必须明确告诉Angular如何提供这个服务——要么在模块的providers数组里注册，要么在服务的@Injectable装饰器中配置自动注册规则。

解决方案一：在模块中注册服务（兼容所有Angular版本） #

找到你声明ProductListComponent的模块（通常是AppModule），完成以下操作：

1. 导入ProcessJsonService
2. 将服务添加到模块的providers数组中

另外，你的模板使用了[(ngModel)]双向绑定，必须导入FormsModule否则会触发额外错误。示例代码如下：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http'; // 对应你当前使用的Http服务
import { FormsModule } from '@angular/forms'; // 必须导入才能使用ngModel

import { AppComponent } from './app.component';
import { ProductListComponent } from './product-list/product-list.component';
import { ProcessJsonService } from './models/myjsonprocess'; // 确保路径和组件中的导入一致

@NgModule({
  declarations: [
    AppComponent,
    ProductListComponent
  ],
  imports: [
    BrowserModule,
    HttpModule,
    FormsModule
  ],
  providers: [ProcessJsonService], // 在这里注册服务！
  bootstrap: [AppComponent]
})
export class AppModule { }

解决方案二：使用providedIn: 'root'（Angular 6+官方推荐） #

这是更简洁的方式，直接在服务的@Injectable装饰器中配置，无需修改模块：

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions, Response } from '@angular/http';
import { Observable, Subject } from 'rxjs/Rx';
import 'rxjs/Rx';
import 'rxjs/add/operator/toPromise';
import { IProduct } from "../models/iproduct";

@Injectable({
  providedIn: 'root' // 添加这行，将服务注册为根级全局提供者
})
export class ProcessJsonService {
  private jsonFileURL: string = "../Data/jsonfile.json";
  constructor(private http: Http) {}

  getProcesslist(): Observable<IProduct[]> {
    return this.http.get(this.jsonFileURL)
      .map((response: Response) => <IProduct[]>response.json())
      .catch(this.handleError);
  }

  private handleError(errorResponse: Response) {
    console.log(errorResponse.statusText);
    return Observable.throw(errorResponse.json().error || "Server error");
  }
}

额外优化建议 #

• 确认ProcessJsonService的导入路径在组件和模块中完全一致，避免因路径拼写错误导致服务无法被找到。
• 如果你的Angular版本是4.3+，建议将Http替换为HttpClient（从@angular/common/http导入），它不需要手动调用.json()解析响应，代码会更简洁：

  // 服务中的getProcesslist方法可以简化为：
  getProcesslist(): Observable<IProduct[]> {
    return this.http.get<IProduct[]>(this.jsonFileURL)
      .catch(this.handleError);
  }
  

完成以上配置后，重启Angular应用，应该就能正常加载JSON数据并展示表格了。

内容的提问来源于stack exchange，提问作者sr123