html - 错误错误 : StaticInjectorError(AppModule)[StorieControllerComponent -> DataService]:

Question

我收到此错误并且我已经检查了所有导入和模块。

我正在尝试访问元素中的 JSON 文件并在对象中使用该数据，但我不确定这里的问题是什么。我用我的 JSON 很好地定义了我的对象，但我不确定问题出在 Http

这是我在控制台中遇到的错误:

这是服务

import { storiesStatus } from './stories';
import { Injectable } from '@angular/core';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { Headers, Http, Response, HttpModule} from '@angular/http';

const storiesJson = './../json/stories_data_json.json';

@Injectable()
export class DataService {

constructor(private http: Http) { }

getStoriesData(): Promise<storiesStatus[]> {
return this.http.get(storiesJson)
  .toPromise()
  .then(response => response.json() as storiesStatus[])
  .catch();
 }

}

这是我的应用模块:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import * as Hammer from 'hammerjs';
import 'hammer-timejs';
import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from 
'@angular/platform-browser';
import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
import { ChartsModule } from 'ng2-charts';

import { AppComponent } from './app.component';
import { AppChildModule } from './modules/app-child.module';
import { CheckinComponent } from 
'./modules/controllers/checkin/checkin.component';
import { PicturePostComponent } from './modules/controllers/picture-
post/picture-post.component';
import { StorieControllerComponent } from './modules/controllers/storie-
controller/storie-controller.component';
import { LoginComponent } from './modules/screens/login/login.component';
import { router } from './modules/routing/app-routing.module';
import { FeedComponent } from './modules/screens/home/feed/feed.component';
import { HomeComponent } from './modules/screens/home/home.component';
import { WelcomeComponent } from 
'./modules/screens/welcome/welcome.component';
import { SignupComponent } from './modules/screens/signup/signup.component';
import { HttpClientModule } from '@angular/common/http';
import { HttpModule } from '@angular/http';
import { BrowserAnimationsModule } from '@angular/platform-
browser/animations';

export class MyHammerConfig extends HammerGestureConfig  {
overrides = <any>{
   'swipe': { direction: Hammer.DIRECTION_ALL }
 }
 }

@NgModule({
 declarations: [
  AppComponent,
  LoginComponent,
  HomeComponent,
  WelcomeComponent,
  SignupComponent
 ],
  imports: [
   BrowserModule,
   HttpClientModule,
   HttpModule,
   AppChildModule,
   ChartsModule,
   BrowserAnimationsModule,
    router
  ],
 providers: [{
   provide: HAMMER_GESTURE_CONFIG,
   useClass: MyHammerConfig
  }],
  bootstrap: [AppComponent]
  })
   export class AppModule { }

这是我连接到服务的组件:

 import { DataService } from '../../../../assets/services/data.service';
 import { storiesStatus } from '../../../../assets/services/stories';
 import { Component, OnInit } from '@angular/core';
 import { NgModule } from '@angular/core';
 import { Headers, Http, Response, HttpModule} from '@angular/http';


 @Component({
   selector: 'app-storie-controller',
    templateUrl: './storie-controller.component.html',
    styleUrls: ['./storie-controller.component.css']
    })
    @NgModule({
     declarations: []
     })

   export class StorieControllerComponent implements OnInit {
      public stories: storiesStatus[];

      constructor(private data: DataService) { 
      this.stories = [];
     }

   ngOnInit() {
        this.data.getStoriesData().then(storiesRes => console.log( 
        this.stories = storiesRes));
      }

     }

Answer 1

在您的 app.module 中，您忘记将 DataService 添加到您的提供程序数组中