StaticInjectorError(AppModule)[AppComponent -> DataService]

Question

我一直在学习如何设置平均堆栈的教程，但当我在localhost上运行代码时，我会看到一个空白屏幕，错误为"StaticInjectorError(AppModule([DataService->Http]："。我花了两天时间试图找出这个bug，但什么也找不到。

关于我使用的工具的详细信息，Angular 8.3.17，node v12

data.service.ts

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class DataService {
result:any;
constructor(private _http: Http) { }
getAccounts() {
return this._http.get("/api/accounts")
.map(result => this.result = result.json().data);
}
}

应用程序模块.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
// Import the Http Module and our Data Service
import { HttpModule } from '@angular/http';
import { DataService } from './data.service';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

应用程序组件.ts

import { Component } from '@angular/core';
// Import the DataService
import { DataService } from './data.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
// Define a users property to hold our user data
accounts: Array<any>;
// Create an instance of the DataService through dependency injection
constructor(private _dataService: DataService) {
// Access the Data Service's getUsers() method we defined
this._dataService.getAccounts()
.subscribe(res => this.accounts = res);
}
}

Answer 1

您需要在app.module.ts文件的providers部分添加DataService，如下

providers: [DataService],

Answer 2

我发现了这个问题，我不得不将dataService添加到我的提供者数组中，并将HttpModule添加到导入中。

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpModule,
AppRoutingModule
],
providers: [DataService],
bootstrap: [AppComponent]
})