{"id":13430745,"url":"https://github.com/Xenoage/BlazorInAngularDemo","last_synced_at":"2025-03-16T06:31:08.678Z","repository":{"id":72097596,"uuid":"432563529","full_name":"Xenoage/BlazorInAngularDemo","owner":"Xenoage","description":"Demonstrates how an existing Angular app can be migrated to Blazor gradually by integrating Blazor components, including calling Angular service methods.","archived":false,"fork":false,"pushed_at":"2023-11-08T18:22:11.000Z","size":15967,"stargazers_count":30,"open_issues_count":1,"forks_count":2,"subscribers_count":3,"default_branch":"dotnet7","last_synced_at":"2024-07-30T15:23:13.285Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Xenoage.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2021-11-27T21:58:47.000Z","updated_at":"2024-07-05T06:20:22.000Z","dependencies_parsed_at":null,"dependency_job_id":"432841e8-1c7d-4814-9d6e-748603090bc4","html_url":"https://github.com/Xenoage/BlazorInAngularDemo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Xenoage%2FBlazorInAngularDemo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Xenoage%2FBlazorInAngularDemo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Xenoage%2FBlazorInAngularDemo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Xenoage%2FBlazorInAngularDemo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Xenoage","download_url":"https://codeload.github.com/Xenoage/BlazorInAngularDemo/tar.gz/refs/heads/dotnet7","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221656361,"owners_count":16858753,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":[],"created_at":"2024-07-31T02:00:57.325Z","updated_at":"2024-10-27T09:30:39.468Z","avatar_url":"https://github.com/Xenoage.png","language":"TypeScript","funding_links":[],"categories":["Sample Projects"],"sub_categories":["Hybrid"],"readme":"# BlazorInAngularDemo\n\n\u003e ### A demo project for integrating Blazor components into an existing Angular app.\n\n\u0026nbsp;\n\n## Motivation\n\nAlthough Blazor is a great choice for creating web frontends, abolishing an existing Angular app and starting from scratch is often no option. This project demonstrates, how .NET 7+ Blazor components can be integrated in an existing Angular project, making it possible to migrate step by step.\n\n## Implementation details\n\nHere are the basic steps how we implemented the demo based on the original Angular project:\n\n* [[Commit]](https://github.com/Xenoage/BlazorInAngularDemo/commit/3ae2ab6ea282bed4a849ec48baeae355b247ba23) We cloned the __[Tour of Heroes](https://angular.io/guide/example-apps-list#tour-of-heroes-completed-application)__ Angular demo application into the `/Angular` directory. We compiled and ran the Angular app to make sure everything was working so far: `npm install --legacy-peer-deps` and `npm start`.\n* [[Commit]](https://github.com/Xenoage/BlazorInAngularDemo/commit/be5a677bba37b43dad24e6726cf9be4422b1d447) We created a simple .NET 7 __Blazor WebAssembly project__ in the `/Blazor` directory. For the beginning, just a runnable app with a simple counter component, displayed on a test page.\n* [[Commit]](https://github.com/Xenoage/BlazorInAngularDemo/commit/f5faafa8dc6c0315e795950f46f7b29b4458c970) We created a `HeroEditor` component in Blazor, including a parameter and an event callback. Our goal is to replace the inner part of Angular's `HeroDetailComponent` later.\n* [[Commit]](https://github.com/Xenoage/BlazorInAngularDemo/commit/05ff41343843b7807f8f15da4b44f722aac258e4) We exported the Blazor components as web components, by using the [Microsoft.AspNetCore.Components.CustomElements](https://www.nuget.org/packages/microsoft.aspnetcore.components.customelements) package, registering the elements as custom elements and running `dotnet publish`.\n* [[Commit]](https://github.com/Xenoage/BlazorInAngularDemo/commit/f51cc799077804b2b9610dce41c770e27b0cff8c) We imported the compiled Blazor web components into the Angular project (see commit diff for all required steps) and replaced the app component by our Blazor counter component for a quick test. `npm start` now successfully serves the Blazor component in an Angular context.\n* [[Commit]](https://github.com/Xenoage/BlazorInAngularDemo/commit/b8b726dacd227f6c5fdb295b2933a93613536038) We integrated the Blazor `HeroEditor` web component into the Angular project. Property binding `[hero]=\"hero\"` is intuitive, but [event binding requires an extra step](https://github.com/Xenoage/BlazorInAngularDemo/blob/b8b726dacd227f6c5fdb295b2933a93613536038/Angular/src/app/hero-detail/hero-detail.component.ts#L29) to get the correct scope in the event handler.\n* ... Work in progress, we will continue with:\n  * Provide a running demo using GitHub Actions and GitHub Pages \n  * Talking to an Angular service from Blazor\n  * Trying to debug the Blazor component when running in Angular\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FXenoage%2FBlazorInAngularDemo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FXenoage%2FBlazorInAngularDemo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FXenoage%2FBlazorInAngularDemo/lists"}