https://github.com/araujomartin/angular-mfe-poc
POC demonstrating microfrontend architecture with Angular acting as the host
https://github.com/araujomartin/angular-mfe-poc
angular microfrontend module-federation native-federation webcomponents
Last synced: 3 months ago
JSON representation
POC demonstrating microfrontend architecture with Angular acting as the host
- Host: GitHub
- URL: https://github.com/araujomartin/angular-mfe-poc
- Owner: araujomartin
- Created: 2025-07-23T23:52:02.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-08-09T23:26:55.000Z (11 months ago)
- Last Synced: 2025-08-10T01:12:19.884Z (11 months ago)
- Topics: angular, microfrontend, module-federation, native-federation, webcomponents
- Language: TypeScript
- Homepage:
- Size: 254 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Angular Micro Frontend Example (MFE) with Native Federation
This repository demonstrates a micro frontend architecture using Angular 20 and `@angular-architects/native-federation` and `@angular-architects/module-federation`. It includes:
- **Shell (Host App):** The main application that loads remote modules.
- **mfe-1:** A remote Angular 20 application integrated via native federation.
- **angular-19-mfe:** A remote Angular 19 application integrated via native federation.
- **angular-15-mfe:** A remote Angular 15 application integrated via module federation.
## Getting Started
1. **Install dependencies:**
```bash
bun install
```
2. **Run the shell and mfe-1 apps:**
```bash
ng s shell --port 4200
ng s mfe-1 --port 4300
```
By default, the shell loads `mfe-1` as a remote module.
## Integrating Remotes
- 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.
- 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.
For Angular applications with versions lower than 16, Module Federation is used to load the remote application.
## Example
To load a remote Angular app (version different from 20) or another framework:
- Configure the remote to expose a web component.
- Add its configuration to the shell’s routes (see `app.routes.ts`).
```typescript
{
path: 'angular-19-mfe',
loadComponent: () => import('./components/wrapper/wrapper').then(m => m.Wrapper),
data: {
config: {
exposedModule: './web-component',
remoteName: 'angular-19-mfe',
elementName: 'angular-19-mfe',
kind: 'native-federation',
remoteEntry: 'http://localhost:5000/remoteEntry.json',
}
}
}
```
## Notes
- For native federation, both shell and remote should use compatible Angular versions.
- For different versions or frameworks, use web components for integration.
## Example Remote Repositories
- [angular-15-remote (Web Component, Angular 15, Module Federation)](https://github.com/araujomartin/angular-15-remote)
- [angular-19-remote (Web Component, Angular 19, Native Federation)](https://github.com/araujomartin/angular-19-remote)