Angular2 won't load json file. Error: Can't resolve all parameters for AppComponent

Question

I am trying to load a json file into my Angular app, but can't find the culprit. It keeps telling me it can't resolve all parameters of my component.

(loading the data directly from the component worked, so it has to do with the code I added most recently for loading data from a json file)

My module:

import { NgModule} from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import 'rxjs/Rx';
import {Observable} from 'rxjs/Observable';

import { AppComponent } from './component.app';

@Injectable() 
export class Service {

  constructor(private _http: Http) {}

  getData(){
    return this.http.get('./assets/data/data.json')
      .map(res => res.json())
  }
}


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

export class AppModule {}

My component:

import { Component } from '@angular/core';

@Component({
    selector: 'app',
    templateUrl: './assets/partials/component-app.html',
    styleUrls: ['./assets/css/component-app.css']
})

export class AppComponent {

    tests: any;

    constructor(private service : Service){}

    ngOnInit() {
        this.service.getData()
        .subscribe(data => {
        this.tests = data;
        })
    }

The error:

(index):18 Error: Error: Can't resolve all parameters for AppComponent: (?).
        at CompileMetadataResolver.getDependenciesMetadata (http://localhost:3000/node_modules/@angular/compiler//bundles/compiler.umd.js:14404:21)
        at CompileMetadataResolver.getTypeMetadata (http://localhost:3000/node_modules/@angular/compiler//bundles/compiler.umd.js:14301:28)
        at CompileMetadataResolver.getDirectiveMetadata (http://localhost:3000/node_modules/@angular/compiler//bundles/compiler.umd.js:14074:30)
        at eval (http://localhost:3000/node_modules/@angular/compiler//bundles/compiler.umd.js:14167:51)
        at Array.forEach (<anonymous>)
        at CompileMetadataResolver.getNgModuleMetadata (http://localhost:3000/node_modules/@angular/compiler//bundles/compiler.umd.js:14161:51)
        at RuntimeCompiler._compileComponents (http://localhost:3000/node_modules/@angular/compiler//bundles/compiler.umd.js:16803:49)
        at RuntimeCompiler._compileModuleAndComponents (http://localhost:3000/node_modules/@angular/compiler//bundles/compiler.umd.js:16741:39)
        at RuntimeCompiler.compileModuleAsync (http://localhost:3000/node_modules/@angular/compiler//bundles/compiler.umd.js:16732:23)
        at PlatformRef_._bootstrapModuleWithZone (http://localhost:3000/node_modules/@angular/core//bundles/core.umd.js:6954:29)

data.json, I need to loop through test_cases and Test_steps:

{
"test_run_id":  "A233-CA92-3293-B9AA",
"app_name": "Chewy.com",
"time_stamp": "2018-01-20T12:00:00Z",
"test_cases": [
    {
        "test_name": "View dog bone",
        "status": true,
        "test_steps": [
            {
                "step_name": "Click Dog Category",
                "screenshot": "file1.png",
                "launch_times": [
                    100,
                    134,
                    123
                ],

HTML:

<section class="tested-app" *ngFor = "let item of tests">
    <h2>----<span> {{ item.app_name }} </span>----</h2>
    <p id="time"> Time: <span> {{item.time_stamp}} </span> </p>
    <section class="flexWrap">
        <div class="module" *ngFor="let subItem of item.test_cases">
            <h3> {{ subItem.test_name }} </h3>
            <p class="status"> {{subItem.status}} </p>
            <div class="step" *ngFor = "let testStep of subItem.test_steps">
                <h4>{{testStep.step_name}}</h4>
                <img src="../assets/images/{{testStep.screenshot}}">

Answer 1

Just like the first line:

import { Component } from '@angular/core';,

you need to add a line

import { Service } from X

where X is the path of the file which defines Service. I guess in your case you are defining Service in app.module, so try

import { Service } from ./app.module.ts

(if app.module.ts is in same directory, otherwise include path to that directory)

Answer 2

You need to import your service in app.component.ts

import { Service} from '...';

you also need implement OnInit

export class AppComponent implements OnInit 

In your getData function, you have typo:

return this._http.get('./assets/data/data.json')

And the most important is you need put your service out of app.module.ts Why? Because it will create a circular dependency: app.module.ts -> app.component.ts -> app.module.ts

Create a new service.ts

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

@Injectable() 
export class Service {

  constructor(private _http: Http) {}

  getData(){
    return this._http.get('./assets/data/data.json')
      .map(res => res.json());
  }
}

Import it in app.module

import { Service } from './service';