{"id":48893347,"url":"https://github.com/cmilanschmidt/blazorangularcomponentgenerator","last_synced_at":"2026-04-16T10:02:12.649Z","repository":{"id":69403370,"uuid":"432842571","full_name":"cmilanschmidt/BlazorAngularComponentGenerator","owner":"cmilanschmidt","description":"Generate Angular components from Blazor components.","archived":true,"fork":false,"pushed_at":"2021-12-06T05:47:36.000Z","size":171,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-12-31T00:40:13.601Z","etag":null,"topics":["angular","blazor","components","dotnet","webassembly"],"latest_commit_sha":null,"homepage":"","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cmilanschmidt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-11-28T22:43:45.000Z","updated_at":"2025-11-12T03:14:07.000Z","dependencies_parsed_at":"2023-06-12T19:00:22.223Z","dependency_job_id":null,"html_url":"https://github.com/cmilanschmidt/BlazorAngularComponentGenerator","commit_stats":null,"previous_names":["cmilanschmidt/blazorangularcomponentgenerator"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/cmilanschmidt/BlazorAngularComponentGenerator","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cmilanschmidt%2FBlazorAngularComponentGenerator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cmilanschmidt%2FBlazorAngularComponentGenerator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cmilanschmidt%2FBlazorAngularComponentGenerator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cmilanschmidt%2FBlazorAngularComponentGenerator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cmilanschmidt","download_url":"https://codeload.github.com/cmilanschmidt/BlazorAngularComponentGenerator/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cmilanschmidt%2FBlazorAngularComponentGenerator/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31880883,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-16T09:23:21.276Z","status":"ssl_error","status_checked_at":"2026-04-16T09:23:15.028Z","response_time":69,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","blazor","components","dotnet","webassembly"],"created_at":"2026-04-16T10:02:08.220Z","updated_at":"2026-04-16T10:02:12.639Z","avatar_url":"https://github.com/cmilanschmidt.png","language":"C#","funding_links":[],"categories":[],"sub_categories":[],"readme":"# BlazorAngularComponentGenerator\n[![Nuget](https://img.shields.io/nuget/v/BlazorAngularComponentGenerator?style=flat-square)](https://www.nuget.org/packages/BlazorAngularComponentGenerator/)\n\nGenerate Angular components from Blazor components.\n\nThis project was modified from the .NET Foundation's original sample code here: https://github.com/aspnet/samples/tree/main/samples/aspnetcore/blazor/JSComponentGeneration\n\nFor more information, see the following:\n* Microsoft .NET Blog: https://devblogs.microsoft.com/dotnet/asp-net-core-updates-in-net-6-rc-1/#generate-angular-and-react-components-using-blazor\n* Microsoft documentation: https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-6.0#generate-angular-and-react-components\n\n## Running the Demo\n\n_Note that the demo does **not** use the NuGet package_\n\n* Start `BlazorApp` using `dotnet watch`\n* Start `angular-app-with-blazor` using `npm start`\n* Navigate to the Angular app at `http://localhost:4200`\n* Wait for the components to load\n* Interact with the app!\n\n## Getting Started\n\n### Blazor WebAssembly Setup\n\n* Install the `BlazorAngularComponentGenerator` [NuGet package](https://www.nuget.org/packages/BlazorAngularComponentGenerator/) to your Blazor project\n* Add the `BlazorAngularComponentGenerator.Attributes` namespace your `_Imports.razor` file\n```C#\n@using BlazorAngularComponentGenerator.Attributes\n```\n* Decorate your Razor component files with\n```C#\n@attribute [GenerateAngular]\n```\n* Register your components for Angular in `Program.cs`\n```C#\nusing BlazorAngularComponentGenerator.Extensions;\nusing BlazorApp;\nusing Microsoft.AspNetCore.Components.WebAssembly.Hosting;\n\nvar builder = WebAssemblyHostBuilder.CreateDefault(args);\n\nbuilder.RootComponents.RegisterForAngular\u003cYourComponent\u003e();\n\nawait builder.Build().RunAsync();\n```\n* Build your project\n* Find the generated Angular components in `bin/Debug/net6.0/js`\n* Run your Blazor WebAssembly project and take note of the URL\n\n### Angular Setup\n\n* Create a `proxy.conf.json` file in your Angular app's `src` folder with the following configuration:\n```JSON\n{\n  \"/\": {\n    \"target\": \"\u003curl pointing to your Blazor app\u003e\",\n    \"secure\": false\n  }\n}\n```\n* Add the `src/proxy.conf.json` to `angular.json` at `projects.\u003cyour app\u003e.architect.serve.options.proxyConfig`. The following is a truncated `angular.json` example:\n```JSON\n{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"angular-app-with-blazor\": {\n      \"architect\": {\n        \"serve\": {\n          \"options\": {\n            \"proxyConfig\": \"src/proxy.conf.json\"\n          },\n        },\n      }\n    }\n  },\n}\n```\n* Set up the Blazor WebAssembly framework. Place the following after `app-root` in the `body` tag in `index.html`\n```HTML\n\u003cscript\u003e\n  let resolveBlazorReadyPromise = null;\n\n  // The Promise that will resolve when Blazor is ready for custom components\n  BlazorReadyPromise = new Promise(function (resolve, reject) {\n    resolveBlazorReadyPromise = resolve;\n  });\n\n  // The JavaScriptInitializer function that will run for each component when Blazor is ready for that component\n  window.initializeBlazorComponent = function (component, params) {\n    resolveBlazorReadyPromise();\n  };\n\u003c/script\u003e\n\u003cscript src=\"_framework/blazor.webassembly.js\"\u003e\u003c/script\u003e\n```\n* Copy your generated Angular components to your `app` folder\n* 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\n```TypeScript\nimport { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';\n\n// ...\n\n@NgModule({\n  declarations: [\n    AppComponent,\n    // \u003cyour components\u003e\n  ],\n  schemas: [\n    CUSTOM_ELEMENTS_SCHEMA // Tells Angular we will have custom tags in our templates\n  ]\n})\nexport class AppModule { }\n```\n* Add your components to your HTML templates\n* Run your Angular application\n\n### Additional Enhancements\n\nNow that your projects are running, you can take things a step further.\n\nAs 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](BlazorApp/BlazorApp.csproj).\n\n```XML\n\u003c!-- Copy the generated Angular components to the Angular project --\u003e\n\u003cItemGroup\u003e\n  \u003cJavaScriptComponents Include=\"$(OutputPath)/js/**/*.*\"/\u003e\n\u003c/ItemGroup\u003e\n\n\u003cTarget Name=\"CopyJavaScriptComponents\"\n    AfterTargets=\"Build\"\u003e\n  \u003cCopy\n    SourceFiles=\"@(JavaScriptComponents)\"\n    DestinationFiles=\"@(JavaScriptComponents-\u003e'../angular-app-with-blazor/src/app/components/%(RecursiveDir)%(Filename)%(Extension)')\" /\u003e\n\u003c/Target\u003e\n```\n\n## Building the NuGet package\n\n* Navigate to the `BlazorAngularComponentGenerator` directory\n* Run `dotnet pack -c Release -p:NuspecFile=BlazorAngularComponentGenerator.nuspec`\n\n## Notes\n\n* 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.\n* At times you may need to do a `rebuild` in order for the MSBuild tasks to run and copy the files correctly\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcmilanschmidt%2Fblazorangularcomponentgenerator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcmilanschmidt%2Fblazorangularcomponentgenerator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcmilanschmidt%2Fblazorangularcomponentgenerator/lists"}