Blazor webassembly in Angular project

Question

I have a Blazor webassembly web application, and i want to add it to an Angular project. I have researched to solution, but i didn't found anything that can help me. is there anynone who has idea over how can i combine Angular en Blazor together?

Answer 1

The trick is to make the Blazor component(s) available for instantiation from JavaScript by calling JSComponentConfigurationExtensions.RegisterForJavaScript, which is available from ASP.NET Core 6.0 on.

Bridging the gap from a Blazor component to an Angular component requires some further steps. The JavaScript Component Generation sample from the ASP.NET samples shows them, however the provided code does not compile at the time of this writing because of some open issues.

Based on this code, I've created a demo project which includes all these steps builds successfully. See my BlazorInAngularDemo github project for the code and description and a working demo.

Answer 2

Starting from .NET 7 you can seamlessly use Blazor components in any javascript application

Program.cs

builder.Services.AddServerSideBlazor(options => {
    options.RootComponents.RegisterCustomElement<Counter>("blazor-counter");
});

In angular

<blazor-counter></blazor-counter>