EXCEPTION: No Directive annotation found on RiskService in angular2 application

Question

I am trying to build an angular 2 application using typescript in visual studio 2015 application. I am using angular release candidate 1.

I have created a risk.service component which will provide data to my view. However I am getting the following error message in the console of my browser while running the application.

EXCEPTION: No Directive annotation found on RiskService.

My folder structure

risk.service.ts

import { Injectable } from '@angular/core';
import { IRisk } from './risk';
import { Component } from '@angular/core';

@Injectable()
export class RiskService {

    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"
            },
            {
                "riskId": 3,
                "reference": "HISC9308342",
                "insuredName": "Test",
                "inceptionDate": "April 28, 2016",
                "riskType": "Quote",
                "status": "Indication",
                "grossPremium": 312.2,
                "allocatedTo": "Broker User",
                "allocatedCompany": "Broker"
            },
            {
                "riskId": 4,
                "reference": "HISC9308344",
                "insuredName": "Test",
                "inceptionDate": "April 29, 2016",
                "riskType": "Quote",
                "status": "Quoted",
                "grossPremium": 444.12,
                "allocatedTo": "Broker User",
                "allocatedCompany": "Broker"
            },
            {
                "riskId": 5,
                "reference": "HISC9308345",
                "insuredName": "Test",
                "inceptionDate": "May 02, 2016",
                "riskType": "Quote",
                "status": "Indication",
                "grossPremium": 423.82,
                "allocatedTo": "Broker User",
                "allocatedCompany": "Broker"
            }
            ,
            {
                "riskId": 6,
                "reference": "HISC9308340",
                "insuredName": "Upper Loi",
                "inceptionDate": "April 25, 2016",
                "riskType": "Quote",
                "status": "Indication",
                "grossPremium": 312.22,
                "allocatedTo": "Andy Marples",
                "allocatedCompany": "Broker"
            },
            {
                "riskId": 7,
                "reference": "HISC9308342",
                "insuredName": "Test",
                "inceptionDate": "April 28, 2016",
                "riskType": "Quote",
                "status": "Indication",
                "grossPremium": 312.22,
                "allocatedTo": "Broker User",
                "allocatedCompany": "Broker"
            },
            {
                "riskId": 8,
                "reference": "HISC9308344",
                "insuredName": "Test",
                "inceptionDate": "April 29, 2016",
                "riskType": "Quote",
                "status": "Quoted",
                "grossPremium": 444.12,
                "allocatedTo": "Broker User",
                "allocatedCompany": "Broker"
            },
            {
                "riskId": 9,
                "reference": "HISC9308345",
                "insuredName": "Test",
                "inceptionDate": "May 02, 2016",
                "riskType": "Quote",
                "status": "Indication",
                "grossPremium": 423.82,
                "allocatedTo": "Broker User",
                "allocatedCompany": "Broker"
            }

        ];
    }
}

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, RiskService],
    templateUrl: '/app/components/risks/risk-list.component.html'
    })

export class RiskListComponent implements OnInit {
    pageTitle: string = 'Risk List';

    risks: IRisk[];

    constructor(private _riskService: RiskService) {
    }

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

app.component.ts

import { Component } from '@angular/core';
import { RiskListComponent } from './components/risks/risk-list.component';
import { DataTable, Column } from 'primeng/primeng';
import { RiskService } from './components/risks/risk.service';

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

})

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

Answer 1

In risk-list.component.ts

Since RiskService isn't a directive, it shouldnt be listed here:

directives: [DataTable, Column, Header, Footer, Paginator, **RiskService**]

Instead it should be imported like this

import { RiskService } from './risk.service';
directives: [DataTable, Column, Header, Footer, Paginator]
providers: [RiskService]

Answer 2

You shoud define your services into the providers attribute of components:

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

or when you bootstrap your application:

bootstrap(AppComponent, [RiskService]);