Service not getting injected correctly and page shows no results + angular 2

Question

Hi I am creating an Angular 2 app. It seems like the service is not getting injected correctly as I don't see the page showing any results. I have set the risk-list.component.html as the startup page. Could somebody tell me what the problem is ?
I have uploaded the code in a plunker as well

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import { RiskListComponent } from './components/risks/risk-list.component';

@NgModule({
    imports: [BrowserModule],
    declarations: [AppComponent, RiskListComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }  

app.component.ts

import { Component } from '@angular/core';
import { DataTable, Column } from 'primeng/primeng';
import { Router } from  '@angular/router';
import {  Routes, RouterModule } from  '@angular/router';
import { WelcomeComponent } from  './components/home/welcome.component';
import { RiskListComponent } from './components/risks/risk-list.component';
import { RiskDetailsComponent } from './components/risks/risk-detail.component';
import { ModuleWithProviders } from '@angular/core';
import './rxjs-operators';


import { RiskService } from './components/risks/risk.service';

@Component({
    selector: 'my-app',
    template: `
    <div>
        <h1>{{pageTitle}}</h1>
          <rm-risks> </rm-risks> 
    </div>
    <div>
      <router-outlet>  </router-outlet>
    </div>
     ` 
    //,
    //directives: [RiskListComponent, DataTable, Column],

})

export class AppComponent {
    pageTitle: string = 'Test UK Trader';
}

const appRoutes: Routes = [
    { path: '/welcome', component: WelcomeComponent },
    { path: '/risks', component: RiskListComponent },
    { path: '/riskdetails', component: RiskDetailsComponent }
];

main.ts

  import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
    import { RiskService } from './components/risks/risk.service';
    import { HttpModule, JsonpModule } from  '@angular/http';
    import './rxjs-operators';
    import { enableProdMode } from '@angular/core';
    import { AppModule } from './app.module';


    const platform = platformBrowserDynamic();

    platform.bootstrapModule(AppModule, [HttpModule, JsonpModule, RiskService]).catch(err => console.error(err));

risk-list.component.ts

import { Component, OnInit } from '@angular/core';
import { IRisk } from './risk';
import { RiskService } from './risk.service';
import { DataTable, Column } from 'primeng/primeng';
import {Header} from 'primeng/primeng';
import {Footer} from 'primeng/primeng';
import {Paginator} from 'primeng/primeng';


@Component({
    selector: 'rm-risks',
    //directives: [DataTable, Column, Header, Footer, Paginator],
    templateUrl: '/app/components/risks/risk-list.component.html',
    providers: [RiskService]
    })

export class RiskListComponent  {
    pageTitle: string = 'Risk List';
    errorMessage: string;
    risks: IRisk[];

    constructor(private _riskService: RiskService) {

        this.risks = this._riskService.getRisks();
    }


};

risk-list.component.html

<h3 class="first">{{pageTitle}}</h3>
<!--[rows]="5" [paginator]="true" [pageLinks]="2" [rowsPerPageOptions]="[5,10,20]"-->
<!--<p-paginator rows="10" totalRecords="100" pageLinkSize="3"></p-paginator>-->
<p-dataTable [value]="risks" [paginator]="true" rows="5" totalRecords="100" pageLinkSize="3" [rowsPerPageOptions]="[5,10,20]"  [sortMode]="multiple" sortField="inceptionDate" [sortOrder]="1" >
    <header>List of Risks</header>


        <!--<footer>Choose from the list.</footer>-->
        <p-column field="reference" header="Reference (contains)" [filter]="true" sortable="true"></p-column>
        <p-column field="insuredName" header="Insured Name (contains)" [filter]="true" sortable="true"></p-column>
        <p-column field="inceptionDate" header="Inception Date (contains)" [filter]="true" sortable="true"></p-column>
        <p-column field="riskType" header="Risk Type (contains)" [filter]="true" sortable="true"></p-column>
        <p-column field="status" header="Status (contains)" [filter]="true" sortable="true"></p-column>
        <p-column field="grossPremium" header="Gross Premium (contains)" [filter]="true" sortable="true"></p-column>
        <p-column field="allocatedTo" header="Allocated To (contains)" [filter]="true" sortable="true"></p-column>
        <p-column field="allocatedCompany" header="Allocated Company (contains)" [filter]="true" sortable="true"></p-column>

</p-dataTable>

riskservice

import { Injectable } from '@angular/core';
import { IRisk } from './risk';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/from';


@Injectable()
export class RiskService {
    //private _riskUrl = '/api/risks/risks.json';
    //constructor(private _http: Http) { }

    //getRisks(): Observable<IRisk[]> {
    //    return this._http.get(this._riskUrl)
    //        .map((response: Response) => <IRisk[]>response.json())
    //        .catch(this.handleError);
   // }

    //private handleError(error: Response) {
    //}
//}

    getRisks(): IRisk[] {
        return [

            {
                "riskId": 1,
                "reference": "HISC9308336",
                "insuredName": "SA 84161",
                "inceptionDate": "March 19, 2016",
                "riskType": "Quote",
                "status": "Indication",
                "grossPremium": 100,
                "allocatedTo": "Broker User",
                "allocatedCompany": "Broker"
            },
            {
                "riskId": 2,
                "reference": "HISC9308340",
                "insuredName": "Upper Loi",
                "inceptionDate": "April 25, 2016",
                "riskType": "Quote",
                "status": "Indication",
                "grossPremium": 312.22,
                "allocatedTo": "Andy Marples",
                "allocatedCompany": "Broker"
            }
        ];
    }
}

Application Structure

Answer 1

This code fetches the risks, but doesn't do anything with it

getRisks(): void {
    this._riskService.getRisks();
}

I assume it should be

getRisks(): void {
    this.risks = this._riskService.getRisks();
}

and I assume ngOnInit() should be

ngOnInit(): void {                                                                                                                  
  //  this._riskService.getRisks();
  this.getRisks();
}

Answer 2

You have to teach the injector how to make a Risk Service. You do this by registering a RiskService provider. You have to do this inapp.component.ts.

In your component under the template add provider [RiskService]

Here is the explanatioin from the angualr 2 site.

Answer 3

You have to include your service into the NgModule

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import { RiskListComponent } from './components/risks/risk-list.component';
import { RiskService } from './risk.service';

@NgModule({
    imports: [BrowserModule],
    declarations: [AppComponent, RiskListComponent],
    bootstrap: [AppComponent],
    providers: [RiskService]
})
export class AppModule { }

The more logic implementation for me in your code, is use that service as singleton. So you don't need to include it on the Component declaration as a provider. Only in the constructor.