To successfully integrate the "org-agents-service" into the "org-agents-component," I need to resolve some dependencies related to the required api-service. Other components and services in the hierarchy are also utilizing this api-service, which acts as a wrapper for the http module.
While most components and services have no issues with dependency injection, the org-agents service is presenting an error message that reads:
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
The service code below showcases how OrgAgentsService depends on the ApiService, successfully injected into other services. The type of error we face seems tied to resolving these dependencies properly.
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)
}
}
Below, you can see the component responsible for requiring the OrgAgentsService. It comprises various methods for handling agent-related functionalities within the organization's context.
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";
}
}