BlazorAngularComponentGenerator 1.1.2

dotnet add package BlazorAngularComponentGenerator --version 1.1.2
NuGet\Install-Package BlazorAngularComponentGenerator -Version 1.1.2
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="BlazorAngularComponentGenerator" Version="1.1.2" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add BlazorAngularComponentGenerator --version 1.1.2
#r "nuget: BlazorAngularComponentGenerator, 1.1.2"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
// Install BlazorAngularComponentGenerator as a Cake Addin
#addin nuget:?package=BlazorAngularComponentGenerator&version=1.1.2

// Install BlazorAngularComponentGenerator as a Cake Tool
#tool nuget:?package=BlazorAngularComponentGenerator&version=1.1.2

BlazorAngularComponentGenerator

Nuget

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:

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.


<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
Product Compatible and additional computed target framework versions.
.NET net5.0 was computed.  net5.0-windows was computed.  net6.0 is compatible.  net6.0-android was computed.  net6.0-ios was computed.  net6.0-maccatalyst was computed.  net6.0-macos was computed.  net6.0-tvos was computed.  net6.0-windows was computed.  net7.0 was computed.  net7.0-android was computed.  net7.0-ios was computed.  net7.0-maccatalyst was computed.  net7.0-macos was computed.  net7.0-tvos was computed.  net7.0-windows was computed.  net8.0 was computed.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed. 
.NET Core netcoreapp2.0 was computed.  netcoreapp2.1 was computed.  netcoreapp2.2 was computed.  netcoreapp3.0 was computed.  netcoreapp3.1 was computed. 
.NET Standard netstandard2.0 is compatible.  netstandard2.1 was computed. 
.NET Framework net461 was computed.  net462 was computed.  net463 was computed.  net47 was computed.  net471 was computed.  net472 was computed.  net48 was computed.  net481 was computed. 
MonoAndroid monoandroid was computed. 
MonoMac monomac was computed. 
MonoTouch monotouch was computed. 
Tizen tizen40 was computed.  tizen60 was computed. 
Xamarin.iOS xamarinios was computed. 
Xamarin.Mac xamarinmac was computed. 
Xamarin.TVOS xamarintvos was computed. 
Xamarin.WatchOS xamarinwatchos was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
1.1.2 771 12/6/2021
1.1.1 492 12/6/2021
1.1.0 488 12/6/2021
1.0.0 461 12/3/2021

[1.1.2]
* Updated readme

[1.1.1]
* Updated readme

[1.1.0]
* Support named JavaScriptInitializer functions
* Updated readme

[1.0.0]
* Initial release