ERROR Error: StaticInjectorError(AppModule)[StorieControllerComponent -> DataService]: - html

Question

I am getting this error and I already check all the import and Modules.
I am trying to access to a JSON file inside my project and use that data in an object but I not sure what is the problem here. I have my object well define with my JSON and I am not sure that the problem is with the Http
This is the Error that I am getting in the console:
This is the Service
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();
}
}
This is my App Module:
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 { }
This is my component conected to the service:
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

In your app.module you forgot to add DataService to your provider array