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 ASP.NET Core with Angular template in Visual Studio.

The project is called AngularProject.

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

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

To make our site serve the framework files, we need to add the following to the 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 ClientApp/src/app/app.module.ts, add the following things:

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

Make sure to replace the row that already has an import...