Multiple components use the same tag in blazor

Question

I'm currently playing around with blazor just to test what it is able to do.

I have a main project which will act as the final website to be shown to the user. For the components I have created a class-library for holding bootstrap-based components like a Table which will render the table with bootstrap-class applied. Because of I will have multiple websites at the end, there will also be shared components between those in another class-library project. This one will also have a component called Table which will render a bootstrap-table from the other shared project with additional handlings for sorting, paging, filtering and so on.

The problem I get is, that there is a naming-conflict which I am not able to resolve.

Lets say the the projects are named Company.Website1 for the final website, Company.Shared.Components for the extended table and Company.Shared.Components.Bootstrap which will hold the bootstrap-components to be consumed by the other shared project.

When I try to create my Table-component in Company.Shared.Components I get the following error

Multiple components use the tag 'Table'

I tried whats been written here but then I got the error

Found markup element with unexpected name 'Table.Table'. If this is intended to be a component, add a @using directive for its namespace

I also tried to alias the using directive without any chance.

The razor-file itself is simply

@using Company.Shared.Components.Bootstrap.Table

<Table></Table>

I guess I would get the same errors if I would use a third-party library which has some components named the same as some already existing in my project. So there must be a workaround which I'm currently not able to see.

Answer 1

If you have a multiple components that share the same name, you can just add the namespace in the tag to specify which one you want to use.

So you could do:

<Company.Shared.Components.Table></Table>

Or

<Company.Shared.Components.Bootstrap.Table></Table>

Source: https://learn.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-8.0#namespaces

Answer 2

Had this issue with Blazorise.Icon vs Blazorise.Icons.FontAwesome.Icon - anywhere that imported both Blazorise and Blazorise.Icons.FontAwesome hit a problem

In the end, to keep things clean, I just inherited Blazorise.Icons.FontAwesome.Icon:

//in FAIcon.razor
@inherits Blazorise.Icons.FontAwesome.Icon
@{
    base.BuildRenderTree(__builder);
}

and used <FAIcon everywhere