title: ERROR Error: StaticInjectorError(AppModule)[StorieControllerComponent -> DataService]:
body: <p>I am getting this error and I already check all the import and Modules.</p>
  
  <p>I am trying to access to a <code>JSON</code> 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 <code>JSON</code> and I am not sure that the problem is with the Http</p>
  
  <p>This is the Error that I am getting in the console:</p>
  
  <p><a href="https://i.stack.imgur.com/tHRc8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tHRc8.png" alt="enter image description here"></a></p>
  
  <p>This is the Service</p>
  
  <pre><code>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&lt;storiesStatus[]&gt; {
  return this.http.get(storiesJson)
    .toPromise()
    .then(response =&gt; response.json() as storiesStatus[])
    .catch();
   }
  
  }
  </code></pre>
  
  <p>This is my App Module:</p>
  
  <pre><code>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 = &lt;any&gt;{
     '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 { }
  </code></pre>
  
  <p>This is my component conected to the service:</p>
  
  <pre><code> 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 =&gt; console.log( 
          this.stories = storiesRes));
        }
  
       }
  </code></pre>