BlazorAngularComponentGenerator

Generate Angular components from Blazor components.

This project was modified from the .NET Foundation's original sample code here: https://github.com/aspnet/samples/tree/main/samples/aspnetcore/blazor/JSComponentGeneration

For more information, see the following:

• Microsoft .NET Blog: https://devblogs.microsoft.com/dotnet/asp-net-core-updates-in-net-6-rc-1/#generate-angular-and-react-components-using-blazor
• Microsoft documentation: https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-6.0#generate-angular-and-react-components

Running the Demo

Note that the demo does not use the NuGet package

• Start BlazorApp using dotnet watch
• Start angular-app-with-blazor using npm start
• Navigate to the Angular app at http://localhost:4200
• Wait for the components to load
• Interact with the app!

Getting Started

Blazor WebAssembly Setup

• Install the BlazorAngularComponentGenerator NuGet package to your Blazor project
• Add the BlazorAngularComponentGenerator.Attributes namespace your _Imports.razor file

@using BlazorAngularComponentGenerator.Attributes

• Decorate your Razor component files with

@attribute [GenerateAngular]

• Register your components for Angular in Program.cs

using BlazorAngularComponentGenerator.Extensions;
using BlazorApp;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;

var builder = WebAssemblyHostBuilder.CreateDefault(args);

builder.RootComponents.RegisterForAngular<YourComponent>();

await builder.Build().RunAsync();

• Build your project
• Find the generated Angular components in bin/Debug/net6.0/js
• Run your Blazor WebAssembly project and take note of the URL

Angular Setup

• Create a proxy.conf.json file in your Angular app's src folder with the following configuration:

{
  "/": {
    "target": "<url pointing to your Blazor app>",
    "secure": false
  }
}

• Add the src/proxy.conf.json to angular.json at projects.<your app>.architect.serve.options.proxyConfig. The following is a truncated angular.json example:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "angular-app-with-blazor": {
      "architect": {
        "serve": {
          "options": {
            "proxyConfig": "src/proxy.conf.json"
          },
        },
      }
    }
  },
}

• Set up the Blazor WebAssembly framework. Place the following after app-root in the body tag in index.html

<script>
  let resolveBlazorReadyPromise = null;

  // The Promise that will resolve when Blazor is ready for custom components
  BlazorReadyPromise = new Promise(function (resolve, reject) {
    resolveBlazorReadyPromise = resolve;
  });

  // The JavaScriptInitializer function that will run for each component when Blazor is ready for that component
  window.initializeBlazorComponent = function (component, params) {
    resolveBlazorReadyPromise();
  };
</script>
<script src="_framework/blazor.webassembly.js"></script>

• Copy your generated Angular components to your app folder
• Update your app.module.ts to include your new component declarations and the CUSTOM_ELEMENTS_SCHEMA. The following is a truncated app.module.ts example

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

// ...

@NgModule({
  declarations: [
    AppComponent,
    // <your components>
  ],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA // Tells Angular we will have custom tags in our templates
  ]
})
export class AppModule { }

• Add your components to your HTML templates
• Run your Angular application

Additional Enhancements

Now that your projects are running, you can take things a step further.

As an example, you can modify your Blazor application's csproj file to automatically copy the generated Angular components to your Angular app. Place the following at the bottom of the Project section. This sample is taken from BlazorApp/BlazorApp.csproj.

<!-- Copy the generated Angular components to the Angular project -->
<ItemGroup>
  <JavaScriptComponents Include="$(OutputPath)/js/**/*.*"/>
</ItemGroup>

<Target Name="CopyJavaScriptComponents"
    AfterTargets="Build">
  <Copy
    SourceFiles="@(JavaScriptComponents)"
    DestinationFiles="@(JavaScriptComponents->'../angular-app-with-blazor/src/app/components/%(RecursiveDir)%(Filename)%(Extension)')" />
</Target>

Building the NuGet package

• Navigate to the BlazorAngularComponentGenerator directory
• Run dotnet pack -c Release -p:NuspecFile=BlazorAngularComponentGenerator.nuspec

Notes

• This project is my first foray into MSBuild related development. Parts of the project likely don't follow best practices and may not work 100% reliably.
• At times you may need to do a rebuild in order for the MSBuild tasks to run and copy the files correctly