BlazorInAngularDemo

A demo project for integrating Blazor components into an existing Angular app.

 

Motivation

Although Blazor is a great choice for creating web frontends, abolishing an existing Angular app and starting from scratch is often no option. This project demonstrates, how .NET 7+ Blazor components can be integrated in an existing Angular project, making it possible to migrate step by step.

Implementation details

Here are the basic steps how we implemented the demo based on the original Angular project:

• [Commit] We cloned the Tour of Heroes Angular demo application into the /Angular directory. We compiled and ran the Angular app to make sure everything was working so far: npm install --legacy-peer-deps and npm start.
• [Commit] We created a simple .NET 7 Blazor WebAssembly project in the /Blazor directory. For the beginning, just a runnable app with a simple counter component, displayed on a test page.
• [Commit] We created a HeroEditor component in Blazor, including a parameter and an event callback. Our goal is to replace the inner part of Angular's HeroDetailComponent later.
• [Commit] We exported the Blazor components as web components, by using the Microsoft.AspNetCore.Components.CustomElements package, registering the elements as custom elements and running dotnet publish.
• [Commit] We imported the compiled Blazor web components into the Angular project (see commit diff for all required steps) and replaced the app component by our Blazor counter component for a quick test. npm start now successfully serves the Blazor component in an Angular context.
• [Commit] We integrated the Blazor HeroEditor web component into the Angular project. Property binding [hero]="hero" is intuitive, but event binding requires an extra step to get the correct scope in the event handler.
• ... Work in progress, we will continue with:
  • Provide a running demo using GitHub Actions and GitHub Pages
  • Talking to an Angular service from Blazor
  • Trying to debug the Blazor component when running in Angular