Adding Blazor to an Angular site

Let’s look at how we can add Blazor to an existing Angular site. This demo is based on the Angular and ASP.NET Core template in Visual Studio.

The folder is called Angular.

First, we need a reference to our Blazor library. I added the BlazorCustomElement project as a reference to the server project.

We need a reference to the Microsoft.AspNetCore.Components.WebAssembly.Server NuGet package; this is so we can serve the framework files.

To make our site serve the framework files, we need to add the following to Program.cs:

app.UseBlazorFrameworkFiles();

By default, Angular will be upset when we add our custom element because it does not recognize the tag. To fix this, we need to tell Angular that we are using custom elements. In the angularproject.client/src/app/app.module.ts, add the following things:

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';

Make sure to replace the row that...