Search code examples
c#razor-pagesblazor-webassemblyhosted-blazor-webassembly

Blazor WASM custom elements in razor pages only working on the root (Index.cshtml) page

I modified this Blazor Custom Elements Sample (".NET 7 Blazor Custom Elements Sample hosted in ASP.NET Core Razor Pages": https://github.com/khalidabuhakmeh/BlazorCustomElementsSample) to show the problem. I also updated the project to the current .NET 7, and also removed the no longer needed <script src="_content/Microsoft.AspNetCore.Components.CustomElements/BlazorCustomElements.js"></script>

The problem can be verified when you run the updated project, where I added the custom element to other pages: https://github.com/horacioj/BlazorCustomElementsSample

When you add a custom element to /privacy or /some/routed/page, the custom element <my-counter title="Khalid" increment-amount="2" /> does not work.

In the /privacy page, the problem is: GET https://localhost:7213/Privacy/_content/Microsoft.AspNetCore.Components.CustomElements/Microsoft.AspNetCore.Components.CustomElements.lib.module.js net::ERR_ABORTED 404

In the /some/routed/page page, the problem is: blazor.webassembly.js: GET https://localhost:7213/some/routed/_framework/blazor.boot.json 404

I have no clue about how this could be solved.

Reference: Blazor custom elements: https://learn.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-7.0#blazor-custom-elements

Thank you

EDIT: It worth noting that when removing <PackageReference Include="Microsoft.AspNetCore.Components.CustomElements" Version="7.0.1" /> from BlazorSolo.Components.csproj, the old way to instance a Blazor component (<component type="typeof(Counter)" param-title="@("the title")" param-IncrementAmount="3" render-mode="WebAssemblyPrerendered" />) works fine on any page.

If the Microsoft.AspNetCore.Components.CustomElements package is kept, the <component...> fails too, with the same errors in the JS console, even after removing any reference to builder.RootComponents.RegisterCustomElement<Counter>("my-counter"); and <my-counter title="routed page" increment-amount="2" />

Could this be a bug in Microsoft.AspNetCore.Components.CustomElements?

Solution

  • Ref. https://github.com/dotnet/aspnetcore/issues/45818

    https://github.com/mkArtakMSFT says:

    you're missing a line in your index to register the base path for the app. That is, adding <base href="/" /> to the head section of the Layout.cshtml file.