Adding Blazor to an Angular site

Let’s start with looking 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 angular 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 at the following things:

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

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