Hello, I have a problem with dependency injection in angular2 project. I have created couple of services in my application project all the appservice classes is implemented from i applicationservice interface and i can see that my methods are working from swagger ui i can do posts or gets to my methods. In the UI project i have run refresh.bat inside nswag folder and it regenerated the methods for me now i can see the components when i import the '@shared/service-proxies/service-proxies' but when i inject them to the constructor of any component. It is giving me an error on runtime. 'No provider for GroupServiceProxy! ; Zone: angular ; Task: Promise.then ; Value:', it feels like it can not inject the http service inside service-proxies but i don't know why. Here is the detailed example below.
GroupAppService:
[AbpAuthorize(AppPermissions.Pages_Tenant_Groups)]
public class GroupAppService : MagicInfoConfigAppServiceBase, IGroupAppService
{
private readonly IRepository<Group> _groupRepository;
private readonly IAppFolders _appFolders;
public GroupAppService(IAppFolders appFolders, IRepository<Group> groupRepository)
{
_appFolders = appFolders;
_groupRepository = groupRepository;
}
[AbpAuthorize(AppPermissions.Pages_Tenant_Groups_Create)]
public async Task CreateGroup(CreateGroupInput input)
{
var group = input.MapTo<Group>();
await _groupRepository.InsertAndGetIdAsync(group);
}
public async Task<PagedResultDto<GroupListDto>> GetGroups(GetGroupInput input)
{
var query = _groupRepository
.GetAll().Include(g => g.Address)
.WhereIf(
!input.Filter.IsNullOrEmpty(),
p => p.Name.Contains(input.Filter) ||
p.ServerUrl.Contains(input.Filter) ||
p.Address.Name.Contains(input.Filter)
);
var groupCount = await query.CountAsync();
var groups = await query
.OrderBy(input.Sorting)
.PageBy(input)
.ToListAsync();
var groupListDtos = groups.MapTo<List<GroupListDto>>();
return new PagedResultDto<GroupListDto>(
groupCount,
groupListDtos
);
}
[AbpAuthorize(AppPermissions.Pages_Tenant_Groups_Delete)]
public async Task DeleteGroup(EntityDto input)
{
await _groupRepository.DeleteAsync(input.Id);
}
}
IGroupAppService:
public interface IGroupAppService : IApplicationService
{
Task<PagedResultDto<GroupListDto>> GetGroups(GetGroupInput input);
Task CreateGroup(CreateGroupInput input);
Task DeleteGroup(EntityDto input);
}
and the last thing angular2 component coming as default with asp.net zero. I am trying to inject the groupService inside. Dashboard.component.ts:
import { Component, Injector, AfterViewInit } from '@angular/core';
import { TenantDashboardServiceProxy,GroupServiceProxy } from '@shared/service-proxies/service-proxies';
import { AppComponentBase } from '@shared/common/app-component-base';
import { appModuleAnimation } from '@shared/animations/routerTransition';
@Component({
templateUrl: './dashboard.component.html',
animations: [appModuleAnimation()]
})
export class DashboardComponent extends AppComponentBase implements AfterViewInit {
constructor(
injector: Injector,
private _dashboardService: TenantDashboardServiceProxy,
private _groupService:GroupServiceProxy
) {
super(injector);
}
ngAfterViewInit(): void {
Morris.Area({
element: 'sales_statistics',
padding: 0,
behaveLikeLine: false,
gridEnabled: false,
//gridLineColor: false,
axes: false,
fillOpacity: 1,
data: [
{
period: '2011 Q1',
sales: 1400,
profit: 400
}, {
period: '2011 Q2',
sales: 1100,
profit: 600
}, {
period: '2011 Q3',
sales: 1600,
profit: 500
}, {
period: '2011 Q4',
sales: 1200,
profit: 400
}, {
period: '2012 Q1',
sales: 1550,
profit: 800
}
],
lineColors: ['#399a8c', '#92e9dc'],
xkey: 'period',
ykeys: ['sales', 'profit'],
labels: ['Sales', 'Profit'],
pointSize: 0,
lineWidth: 0,
hideHover: 'auto',
resize: true
});
this.getMemberActivity();
}
test():void{
this._groupService.deleteGroup(1).subscribe(result=>{
alert("subscribed");
});
}
getMemberActivity(): void {
this._dashboardService
.getMemberActivity()
.subscribe(result => {
$("#totalMembersChart").sparkline(result.totalMembers, {
type: 'bar',
width: '100',
barWidth: 6,
height: '45',
barColor: '#F36A5B',
negBarColor: '#e02222',
chartRangeMin: 0
});
$("#newMembersChart").sparkline(result.newMembers, {
type: 'bar',
width: '100',
barWidth: 6,
height: '45',
barColor: '#5C9BD1',
negBarColor: '#e02222',
chartRangeMin: 0
});
});
};
}
2 Answer(s)
-
0
Ok sorry for the message i have just missed the part in development guide.
While Nswag automatically generate proxy files, it does not refresh service-proxies.module.ts. If you add a new service, you should manually add it to this file as like others.
so i need to add it there. If someone is having the same problem maybe it can help.
-
0
Hi,
This is one of the manual steps in angular2 project. Currently we don't have a way to do it automatically.
Thanks for sharing anyway :)