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?
5
-
just wanted to know, why do you need to add Blazor WASM into Angular project?Rahul– Rahul2020-06-02 09:42:48 +00:00Commented Jun 2, 2020 at 9:42
-
2because i have a .Net methodes in one component. I want to add this component to my Angular app to my exisiting Angular appIbrahim– Ibrahim2020-06-02 09:58:02 +00:00Commented Jun 2, 2020 at 9:58
-
I don't think it's possible to use Blazor components inside an core Angular app. However standalone Angular elements Web component may use inside Blazor WASM app using JavaScript Interop feature.Rahul– Rahul2020-06-02 13:33:52 +00:00Commented Jun 2, 2020 at 13:33
-
1Did you ever get this working? I think its a concept that would be valuable to many who have existing angular applicationsBill– Bill2020-10-02 20:54:01 +00:00Commented Oct 2, 2020 at 20:54
-
2May be you should take the .Net methods into a rest server that you call from your Angular projectDaniel W.– Daniel W.2021-05-07 12:53:47 +00:00Commented May 7, 2021 at 12:53
Add a comment
|
4 Answers
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>
Comments
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.
Comments
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.
Comments
Mixing Blazor with Angular is kind of like asking a cat and a dog to co-author a novel.
Sure, they both have talent, but their styles, languages, and workflows are wildly different—and getting them to play nice takes serious effort. 🙃
If you're thinking about combining Blazor (C# in the browser!) with Angular (TypeScript powerhouse), here's what you need to know:
It’s possible via Web Components and JavaScript Interop.
It’s complex—and adds overhead to both dev and runtime.
Use case matters: Only try it if you’re integrating legacy components or transitioning gradually.
Sometimes, choosing one framework with a clean backend–frontend split is the better move. I’ve explored both, and while it’s cool to prototype, I wouldn’t recommend co-writing novels without a shared language
