CODEWITHSUNDEEP
angularblazorwebassemblyblazor-webassembly
Ibrahim
Ibrahim

Reputation: 119

Blazor webassembly in Angular project

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?

Upvotes: 10

Views: 5097

Answers (3)

Pieterjan
Pieterjan

Reputation: 3521

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>

Upvotes: 7

Andi
Andi

Reputation: 3498

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.

Upvotes: 3

NewRK
NewRK

Reputation: 449

Why not? Go ahead, but get ready for a copious amount of manual work.

Loot at the very first part of this manual. It shows you how to use Blazor.Start javascript function to bootstrap your WASM into an HTML file. You can just take all built resources, transfer them to your Angular project and run Blazor.Start.

You should be able to use JS interop to talk to your Angular app.

Upvotes: 0

Related Questions