{"id":30271779,"url":"https://github.com/araujomartin/angular-mfe-poc","last_synced_at":"2026-04-15T13:33:13.475Z","repository":{"id":306166046,"uuid":"1025224922","full_name":"araujomartin/angular-mfe-poc","owner":"araujomartin","description":"POC demonstrating microfrontend architecture with Angular acting as the host","archived":false,"fork":false,"pushed_at":"2025-08-09T23:26:55.000Z","size":260,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-10T01:12:19.884Z","etag":null,"topics":["angular","microfrontend","module-federation","native-federation","webcomponents"],"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/araujomartin.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,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-23T23:52:02.000Z","updated_at":"2025-08-09T23:26:58.000Z","dependencies_parsed_at":"2025-07-24T03:18:45.697Z","dependency_job_id":"187f7e10-cafa-4313-aecb-8720d3864edd","html_url":"https://github.com/araujomartin/angular-mfe-poc","commit_stats":null,"previous_names":["araujomartin/angular-mfe-poc"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/araujomartin/angular-mfe-poc","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/araujomartin%2Fangular-mfe-poc","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/araujomartin%2Fangular-mfe-poc/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/araujomartin%2Fangular-mfe-poc/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/araujomartin%2Fangular-mfe-poc/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/araujomartin","download_url":"https://codeload.github.com/araujomartin/angular-mfe-poc/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/araujomartin%2Fangular-mfe-poc/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31842914,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-15T13:28:40.153Z","status":"ssl_error","status_checked_at":"2026-04-15T13:28:29.396Z","response_time":63,"last_error":"SSL_read: 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","microfrontend","module-federation","native-federation","webcomponents"],"created_at":"2025-08-16T05:01:12.924Z","updated_at":"2026-04-15T13:33:13.459Z","avatar_url":"https://github.com/araujomartin.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular Micro Frontend Example (MFE) with Native Federation\n\nThis repository demonstrates a micro frontend architecture using Angular 20 and `@angular-architects/native-federation` and `@angular-architects/module-federation`. It includes:\n\n- **Shell (Host App):** The main application that loads remote modules.\n- **mfe-1:** A remote Angular 20 application integrated via native federation.\n- **angular-19-mfe:** A remote Angular 19 application integrated via native federation.\n- **angular-15-mfe:** A remote Angular 15 application integrated via module federation.\n\n## Getting Started\n\n1. **Install dependencies:**\n   ```bash\n   bun install\n   ```\n\n2. **Run the shell and mfe-1 apps:**\n   ```bash\n   ng s shell --port 4200\n   ng s mfe-1 --port 4300\n   ```\n   By default, the shell loads `mfe-1` as a remote module.\n\n## Integrating Remotes\n\n- If you want to import other Angular applications with a different version, or applications built with other frameworks, you must expose them as **Web Components**, i used `@angular/elements`, to do this.\n- The shell uses a wrapper component to load such remotes. You need to configure the remote to export a web component and provide its details (remote name, exposed module, element name, remote entry URL) in the shell’s route configuration.\n\nFor Angular applications with versions lower than 16, Module Federation is used to load the remote application.\n\n## Example\n\nTo load a remote Angular app (version different from 20) or another framework:\n- Configure the remote to expose a web component.\n- Add its configuration to the shell’s routes (see `app.routes.ts`).\n\n```typescript\n{\n  path: 'angular-19-mfe',\n  loadComponent: () =\u003e import('./components/wrapper/wrapper').then(m =\u003e m.Wrapper),\n  data: {\n    config: {\n      exposedModule: './web-component',\n      remoteName: 'angular-19-mfe',\n      elementName: 'angular-19-mfe',\n      kind: 'native-federation',\n      remoteEntry: 'http://localhost:5000/remoteEntry.json',\n    }\n  }\n}\n```\n\n## Notes\n\n\n- For native federation, both shell and remote should use compatible Angular versions.\n- For different versions or frameworks, use web components for integration.\n\n\n## Example Remote Repositories\n\n- [angular-15-remote (Web Component, Angular 15, Module Federation)](https://github.com/araujomartin/angular-15-remote)\n- [angular-19-remote (Web Component, Angular 19, Native Federation)](https://github.com/araujomartin/angular-19-remote)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faraujomartin%2Fangular-mfe-poc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faraujomartin%2Fangular-mfe-poc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faraujomartin%2Fangular-mfe-poc/lists"}