ABP - Dependency injection issue for app service when using AbpCrudPageBase in Blazor - asp.net-core

Question

I've been following this tutorial on the ABP docs site to learn ABP (using Blazor Server and EF Core ABP template).
The code for the issue I am encountering is available on my Github (I've created a tag for the issue).
I'm not doing it exactly the same, instead, I'm using Person as my entity instead of Book (making a sporting club management system instead of a book store).
I completed Part 1 of the tutorial and the correct API endpoints were created and I am able to use them to perform CRUD operations.
I am now on Part 2 of the tutorial and the "list page" is not loading.
This is the error I see in the browser dev tools.
blazor.server.js?_v=637732634000000000:1
[2022-01-17T17:57:20.070Z] Error: System.InvalidOperationException: Cannot provide a value for property 'AppService' on type 'Acme.ClubManagement.Blazor.Pages.People'. There is no registered service of type 'Acme.ClubManagement.People.IPersonAppService'.
at Microsoft.AspNetCore.Components.ComponentFactory.<>c__DisplayClass7_0.<CreateInitializer>g__Initialize|1(IServiceProvider serviceProvider, IComponent component)
at Microsoft.AspNetCore.Components.ComponentFactory.PerformPropertyInjection(IServiceProvider serviceProvider, IComponent instance)
at Microsoft.AspNetCore.Components.ComponentFactory.InstantiateComponent(IServiceProvider serviceProvider, Type componentType)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.InstantiateChildComponentOnFrame(RenderTreeFrame& frame, Int32 parentComponentId)
at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InitializeNewComponentFrame(DiffContext& diffContext, Int32 frameIndex)
at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InitializeNewSubtree(DiffContext& diffContext, Int32 frameIndex)
at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InsertNewFrame(DiffContext& diffContext, Int32 newFrameIndex)
at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForFramesWithSameSequence(DiffContext& diffContext, Int32 oldFrameIndex, Int32 newFrameIndex)
at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForRange(DiffContext& diffContext, Int32 oldStartIndex, Int32 oldEndIndexExcl, Int32 newStartIndex, Int32 newEndIndexExcl)
at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForFramesWithSameSequence(DiffContext& diffContext, Int32 oldFrameIndex, Int32 newFrameIndex)
at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForRange(DiffContext& diffContext, Int32 oldStartIndex, Int32 oldEndIndexExcl, Int32 newStartIndex, Int32 newEndIndexExcl)
at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForFramesWithSameSequence(DiffContext& diffContext, Int32 oldFrameIndex, Int32 newFrameIndex)
at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForRange(DiffContext& diffContext, Int32 oldStartIndex, Int32 oldEndIndexExcl, Int32 newStartIndex, Int32 newEndIndexExcl)
at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.ComputeDiff(Renderer renderer, RenderBatchBuilder batchBuilder, Int32 componentId, ArrayRange`1 oldTree, ArrayRange`1 newTree)
at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment, Exception& renderFragmentException)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()
What I find difficult to understand is that it says there is a dependency injection issue for Acme.ClubManagement.People.IPersonAppService, but this service is correctly looked up when using the API endpoints.
Why is this DI issue happening for the Blazor page and not when using the API endpoints directly?

Answer 1

ABP uses a naming convention, see https://docs.abp.io/en/abp/latest/Dependency-Injection#exposed-services-by-convention
So, if you rename IPersonAppService to IPeopleAppService the problem will be solved.
Thanks for the minimal, reproducible example

Answer 2

#TheMagnificent11 in response to the question you wrote in the comment;
The problem is caused by the following code block in People.razor.
<DataGridColumns>
<DataGridColumn TItem="PersonDto"
Field="#nameof(PersonDto.GivenName)"
Caption="#Localizer["PeopleTable:GivenName"]">
</DataGridColumn>
</DataGridColumns>
<DataGridColumns>
<DataGridColumn TItem="PersonDto"
Field="#nameof(PersonDto.Surname)"
Caption="#Localizer["PeopleTable:Surname"]">
</DataGridColumn>
</DataGridColumns>
It is necessary to replace this code with the following:
<DataGridColumns>
<DataGridColumn TItem="PersonDto"
Field="#nameof(PersonDto.GivenName)"
Caption="#Localizer["PeopleTable:GivenName"]">
</DataGridColumn>
<DataGridColumn TItem="PersonDto"
Field="#nameof(PersonDto.Surname)"
Caption="#Localizer["PeopleTable:Surname"]">
</DataGridColumn>
</DataGridColumns>
In short, the problem is that the DataGridColumns tag is used twice in the same DataGrid.
PS: #TheMagnificent11 I couldn't fit the answer into the comment field so I had to write it here, FYI.