Angular2 Service's dependencies as passed to constructor are undefined, despite the same dependency being passed to other services

Question

I must inject a service "org-agents-service" into a component "org-agents-component". The dependencies resolver cannot resolve any parameters to org-agents-service which requires api-service.

Here is the hierarchy of components/services (irrelevant services/components excluded) Essentially, every service that makes external calls uses api-service which is a wrapper around http module.

The search components and services have no issue having dependencies injected however, the org-agents service yields this descriptive error: browser_adapter.js:84EXCEPTION: Can't resolve all parameters for OrgAgentsService: (?).

/app-component
    /dashboard-component
       /agent-search-component
           *search-service
               *api-service
       /task-search-component
           *search-service
               *api-service
       /search-view-component
           *search-service
               *api-service
       /org-agents-component
           *org-agents-service
               *api-service

Using Webpack with Angular2 Rc 4 (typescript). This is the service code. Its fairly straightforward. It depends on Api Service which is also injected (successfully) into several other services.

import {Injectable} from '@angular/core'
import {ApiService} from '../common/services/api.service'
import {Agent} from '../models/agent.model'

Injectable();
export class OrgAgentsService {
    constructor(private apiService: ApiService) {

    }
    public orgId: number;
    public agents: Agent[];

    public retrieveAgentsList(orgId) {
        let url: string = `https://blahblahblah.blah.blah/endpoint/${orgId}/agents`;

        return this.apiService.get(url).map((data, err) => {
            if(!err) {
                for(let agentResult of data.body) {
                    let agentModel = this.extractAgentSearchResult(agentResult);
                    this.agents.push(agentModel)
                }
                return this.getAgents();
            }
            console.log(`[ERROR: OrgAgentService] could not retrieve agents for org ${this.orgId}`);
            return null
        })
    }

    public getAgents(): Agent[] {
        return this.agents
    }

    private extractAgentSearchResult(item: any): Agent {
        console.log(" agent data: " + JSON.stringify(item));
        let id = item["id"];
        let name = item["name"];
        let email = item["email"];
        let foreign_id = item["foreign_id"];
        let org_id = item["org_id"];
        let roles = "";
        for (var i = 0, n = item["roles"].length; i < n; i++) {
            roles = roles + item["roles"][i] + " ";
        }
        return new Agent(id, name, email, foreign_id, org_id, roles)
    }
}

here is the code for the component that needs the service:

import {Component, OnInit, OnChanges} from '@angular/core'
import {OrgAgentsService} from "../../services/org-agents.service";
import {Agent} from '../../models/agent.model'
import {AgentDetailComponent} from '../agent-detail/agent-detail.component'
import {ApiService} from "../../common/services/api.service";

@Component({
    selector: 'org-agents-list',
    providers: [OrgAgentsService, ApiService],
    directives: [AgentDetailComponent],
    template: require('./org-agents.template.html')
})
export class OrgAgentsComponent implements OnInit, OnChanges {
    constructor(private orgAgentsSvc: OrgAgentsService) {

    }
    private agents: Agent[];
    public agentId: number;
    private orgId: number;

    ngOnInit() {
        this.getAgents()
    }

    ngOnChanges() {
        this.getAgents();
    }

    getAgents() {
        this.orgAgentsSvc.retrieveAgentsList(this.orgId).subscribe(agents=>{
            this.agents = agents;
        });
    }
    onSelect(agent: Agent){
        this.agentId = agent.id;
        let elem = <HTMLElement>document.querySelector('#agentDetailsModalOrgList ');
        elem.style.display="block";
    }

    private onAgentDetailsClose($event){
        let elem = <HTMLElement>document.querySelector('#agentDetailsModalOrgList ');
        elem.style.display="none";
    }
}

Answer 1

I had this bug me for a while... For me in the end it was a syntax error. I notice in your OrgAgentsService you have Injectable() not @Injectable(). Is that a cut and paste error or is that in the original code? Also you have an ; at the end of it which shouldn't be there.