Base solution for your next web application
Open Closed

Dependency Injection err in Angular 2, no service provider. #2324


User avatar
0
cangunaydin created

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)
  • User Avatar
    0
    cangunaydin created

    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.

  • User Avatar
    0
    ismcagdas created
    Support Team

    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 :)