README.md

Overview

Using the default projects generated by the Angular CLI and .NET Core CLI, this project shows how to integrate Blazor WASM components to an Angular project

Prerequisites

1. Download and Install Node
2. Download and Install .NET 6 SDK
3. Note: These samples work with with Angular v12 and Node v12. If need be use node version manager (nvm) to set to v12

1. Create the Angular Project

See Installing Angular CLI to get started with a simple Angular project

1. ng new simple-angular-project
2. cd simple-angular-project
3. ng serve

2. Create the Blazor Project

See Tooling for ASP.NET Core Blazor to get started with a simple Blazor project

1. dotnet new blazorwasm --name simple-blazor-project
2. cd simple-blazor-project
3. dotnet run

2.1 Add the required nuget packages

1. dotnet add package Microsoft.AspNetCore.Components.Web --version 6.0.0

2.2.1 Add the JSComponentGeneration Helper project to the simple-blazor-project

dotnet add reference ../js-component-generation-helpers/JSComponentGeneration/JSComponentGeneration.csproj

2.2.2 Add the JSComponentGeneration Helper project to the simple-blazor-project

dotnet add reference ../js-component-generation-helpers/JSComponentGeneration.Build/JSComponentGeneration.Build.csproj

2.3 Add the build target that does the actual code generation to the angular project

Unfortunately there is no CLI command for this step so it needs to be added manually by editing the simple-blazor-project.csproj

<!--Add this just before the closing </Project> tag-->
<Import Project="..\js-component-generation-helpers\JSComponentGeneration.Build\build\netstandard2.0\JSComponentGeneration.build.targets" />

2.4 Create a Blazor Component

This step will create a standard Blazor Component and mark it with an Attribute tat it be generated as an Angular component using the GenerateAngular attribute

1. dotnet new razorcomponent --name BlazorInfo
2. Relace the BlazorInfo.razor code with the following

@using JSComponentGeneration.Angular
@attribute [GenerateAngular]

<h3>Blazor Info Component</h3>
<p>@Message</p>

@code {
    [Parameter] public string Message { get; set; } = "Default Message";
}

2.5 Register the Blazor Component for Angular so that it can be downloaded by Angular

1. Add the following using clause to simple-blazor-project/Program.cs using JSComponentGeneration.Angular;
2. Add the following line to the builder builder.RootComponents.RegisterForAngular<BlazorInfo>();

2.6 Build the simple-blazor-project project

From the simple-blazor-project folder dotnet build

2.7 Integrator Blazor Components to Angular App

Add the newly generated components to app.module.ts by addign the following lines:

import { BlazorInfoComponent } from "./blazor-info/blazor-info.component";

In the declarations section:

BlazorInfoComponent

In index.html add the following script above the closing body tag

  <script src="_framework/blazor.webassembly.js"></script>

Create a file proxy.conf.json and the angular src folder

{
    "/": { "target": "https://localhost:7025/", "secure": false }
}

Note that "secure" values is false above otherwise you will get a DEPTH_ZERO_SELF_SIGNED_CERT error while proxying the request

Add the <blazor-info> tag to the app.component.html. Add the following block of html

  <div>
    <button (click)="toggleBlazorComponentVisibility()">Toggle Blazor Component</button>
    <div *ngIf="blazorComponentVisible">
      <blazor-info [message]="title"></blazor-info>
    </div>
  </div>

In the app.component.html, code up the blazorComponentVisible boolean and toggleBlazorComponentVisibility() method by modifying the AppComponent Class to this:

export class AppComponent{
  title = 'simple-angular-project';
  blazorComponentVisible: boolean;

  constructor() {
    this.blazorComponentVisible = false;
  }

  toggleBlazorComponentVisibility() {
    this.blazorComponentVisible = !this.blazorComponentVisible
  }
}

2.x Create a solution for the .NET projects (Optional)

From the /src folder:

1. dotnet new sln --name simple-blazor-project
2. dotnet sln add simple-blazor-project/simple-blazor-project.csproj
3. dotnet sln add js-component-generation-helpers/JSComponentGeneration/JSComponentGeneration.csproj
4. dotnet sln add js-component-generation-helpers/JSComponentGeneration.Build/JSComponentGeneration.Build.csproj

Further Notes: libman.json is not required

Final Output: