🧩 Micro Frontends com Native Federation no Angular

Este projeto é um exemplo prático de como implementar micro frontends utilizando o Native Federation no Angular, com um projeto atuando como Host (Dynamic Host) e outro como Remote (componente remoto carregado dinamicamente).

---

📌 Objetivo

Demonstrar como dividir uma aplicação Angular em múltiplos micro frontends independentes, que se integram por meio de Native Federation, promovendo escalabilidade e independência entre times.

---

⚙️ Tecnologias utilizadas

• Angular
• @angular-architects/native-federation
• TypeScript
• Docker (opcional para containerização)

---

🧰 Pré-requisitos

Node.js 18+

Angular CLI 16 ou superior

NPM ou Yarn

(Opcional) Docker instalado

🎯 Como usar este projeto de exemplo

O projeto acima está divido em 3 repositórios sendo este o primeiro e os demais abaixo

• https://github.com/wssimplicio/mfe-busca-cep
• https://github.com/wssimplicio/mfe-busca-feriado

Após clonar os 3 repos você pode subir cada um deles separadamente com:

ng serve 

Ou se preferir pode subir os 3 com o Docker que já deixei preparado como exemplo

docker compose up

⚠️ Atenção !

Caso faça alguma alteração nos componentes é necessario rebuildar o projeto se caso subir com Docker:

docker compose up --build

🚀 Passo a passo para criação do zero

1. Criação dos projetos

Crie dois projetos Angular:

• host-app: será o Dynamic Host

• remote-app: será o Remote

• Use portas diferentes para evitar conflitos, por exemplo:

  • host-app → http://localhost:4200

  • remote-app → http://localhost:4201

2. Instalação do Native Federation

No terminal, dentro de cada projeto, execute:

• Para o Host:

ng add @angular-architects/native-federation -project app-host --port 4200 --type dynamic-host

• Para o Remote:

ng add @angular-architects/native-federation -project app-remote --port 4201 --type remote

3. Configuração do projeto Remote

• No arquivo federation.config.json, configure o componente que será exposto:

{
  "name": "remoteApp",
  "exposes": {
    "./MeuComponente": "./src/app/meu-componente/meu-componente.component.ts"
  }
}

💡 É uma boa prática criar um componente exclusivo para exportação.

Se o projeto não utiliza RouterOutlet, ajuste o AppComponent para renderizar o componente diretamente.

4. Configuração do Host

• No federation-manifest.json do Host, configure o Remote:

{
  "remotes": {
    "remoteApp": "http://localhost:4201/remoteEntry.js"
  }
}

Neste arquivo é onde acontece o contrato entre as partes app-host <-> app-remote

• Depois, configure a rota que usará o componente remoto no app.routes.ts:

export const routes: Routes = [
   {
    path: 'meu-componente', loadComponent: () => loadRemoteModule('meu-componente', './MeuComponente')
    .then((b) => b.MeuComponente)
  },
];

5. Executando os projetos

• Em dois terminais separados, execute:

ng serve 

• Execute em cada pasta raiz do projeto
• Depois acesse http://localhost:4200 para ver o carregamento do host e http://localhost:4200/meu-componente para acessar seu componente dinamicamente

🐳 (Opcional) Rodando com Docker

Você pode criar Dockerfile e docker-compose.yml para rodar os projetos em containers como realizadao no projeto deste repositorio

📝 Considerações finais

O uso de Native Federation com Angular permite que múltiplas equipes desenvolvam e entreguem partes da aplicação de forma independente. É ideal para projetos grandes e times distribuídos.

🤝 Contribuições

Fique à vontade para abrir issues, enviar PRs ou sugerir melhorias! A ideia é manter este repositório como um ponto de partida para quem quer explorar micro frontends no Angular.