Micro Frontend Architecture com Angular 20: Um guia completo

A arquitetura Micro Frontend (MFE) tornou-se um mudança de jogo para aplicações angulares em escala corporativa, especialmente com o lançamento do Angular 20 e o plugin @angular-arquitetos/federação nativa. Essa abordagem permite que as equipes criem aplicativos de front -end escaláveis, sustentáveis ​​e de forma independente, dividindo um aplicativo grande em micro aplicativos menores e focados. Neste blog, mergulharemos profundamente: o que a arquitetura de micro front-end é por que o Angular 20 é perfeito para o guia passo a passo para a criação de um host e dois aplicativos remotos de carregamento preguiçoso, rotas compartilhadas e práticas recomendadas para SEO, desempenho e CI/CD o que é arquitetura de front-end? O Micro Frontend é um estilo arquitetônico em que um aplicativo de front-end é decomposto em micro aplicativos menores e independentes que podem ser desenvolvidos, testados e implantados independentemente. Assim como os microsserviços no back -end, os MFES capacitam as organizações a escalar o desenvolvimento de front -end em várias equipes. Benefícios -chave: Escalabilidade → Várias equipes podem funcionar em paralelo sem conflitos. Independência da tecnologia → MFES diferentes podem até usar estruturas diferentes (angular, reagir, vue etc.). Implantações independentes → Empurre atualizações sem tocar em todo o aplicativo. Construções mais rápidas → Bases de código menores levam a pipelines de CI/CD mais rápidos. Por que federação nativa angular 20 +? Com o Angular 20, o pacote @angular-arquitetos/federação nativa oferece uma maneira perfeita de implementar micro frontends usando a Federação do Módulo Webpack 5. Ao contrário das configurações mais antigas, a federação nativa é: otimizada para CLI angular 17+ (e 20) construções mais rápidas com atualizações incrementais melhores dx com dependências compartilhadas de configuração simplificada para evitar duplicação passo a passo: criando micro-frontends in angular 20 1. Modo de tela cheia 2. Crie um espaço de trabalho ng novo MFE-Workspace-Create-Aplicação Falsa CD MFE-WorkSpace Digite Modo de tela Full Saída Modo 3. @Angular-Architects/Federação nativa-Shell de projeto-host TYPE Digite Modo de tela cheia Modo de tela cheia 5. Gere aplicações remotas (MFE1 e MFE2) NG APLICATIVA MFE1-ROUTO-SCSS NGO = SCSS NG GERATE APLICATION MFE2-Routing-styleation = SCSS NGO = SCSS NG Gerate Remoto Ng Adicione @angular-arquitetos/nativo-federação-Projeto MFE2 –TYPE Remoto Digite Modo de tela cheia Modo de tela cheia agora você tem: Shell → Host MFE1 → Remoto 1 mFe2 → Remote 2 6. Configure Remotes nos projetos de atualização/shell/module »cconfig.ts: {constemks {CONFIGURE {com a atualização dos projetos de host/shell/federação. requer (‘@angular-arquitetos/nativo-federação/configuração’); module.exports = withNativeFederation({ name: ‘shell’, remotes: { mfe1: ” mfe2: ” }, shared: { “@angular/core”: { singleton: true, strictVersion: true }, “@angular/common”: { singleton: true, strictVersion: true }, “@angular/router”: { singleton: true, StrictVersion: true},}}); Digite o modo de saída de tela cheia de tela cheia 7. Configure rotas remotas em mfe1/app.Routes.ts: importar {rotas} de ‘@angular/roteador’; importar {homeComponent} de ‘./home/home.component’; exportar const remoteroutes: rotas = [
{ path: ”, component: HomeComponent }
]; Digite o modo de saída do modo de tela cheia em mfe2/app.Routes.ts: importar {rotas} de ‘@angular/roteador’; importar {DashboardComponent} de ‘./dashboard/dashboard.component’; exportar const remoteroutes: rotas = [
{ path: ”, component: DashboardComponent }
]; Digite o modo de saída do modo de tela cheia 8. Configure rotas de host (Lazy + simples) no shell/app.Routes.ts: importar {rotas} de ‘@angular/roteador’; Exportar Rotas Const: Rotas = [
{
path: ‘mfe1’,
loadChildren: () => import(‘mfe1/Routes’).then(m => m.remoteRoutes)
},
{
path: ‘mfe2’,
loadChildren: () => import(‘mfe2/Routes’).then(m => m.remoteRoutes)
},
{
path: ‘simple’,
loadComponent: () => import(‘./simple/simple.component’).then(m => m.SimpleComponent)
},
{ path: ”, redirectTo: ‘mfe1’, pathMatch: ‘full’ }
]; Digite o modo de saída do modo de tela completa Criar shell/simples/simples.component.ts: importar {componente} de ‘@angular/core’; @Component ({Selector: ‘App-Simple’, Standalone: ​​True, Modelo: `Routethis local simples é um componente local dentro do shell. 4202 ng servir shell -port 4200 -O Digite o modo de tela cheia de saída Modo de tela cheia Visite → Agora você pode navegar entre MFE1, MFE2 e uma rota de hospedeiro simples. Melhores práticas para micro front de dependências compartilhadas → Evite incompatibilidades de versão, compartilhando bibliotecas de núcleo angular. Isolamento de rota → Mantenha as rotas remotas isoladas para evitar conflitos. Pré -carregamento → Pré -carregamento remotos se você quiser navegação mais rápida. Manuseio de erros → Implementar UIs de fallback quando um controle remoto não está disponível. Comunicação → Use RXJs, serviços compartilhados ou eventos personalizados para comunicação entre MFE. Pipelines CI/CD → Implante cada MFE de forma independente com ferramentas como ações do GitHub ou Azure DevOps. Otimização de SEO → Use o Universal Angular (SSR) ou a pré-renda para tornar o MFES Seo-Friendly. Visão geral da estrutura da pasta mfe-workspace/ ├── Projetos/ │ ├── shell/ # host aplicativo │ ├── mfe1/ # remoto 1 │ └── MFE2/ # remoto 2 └umento angular.JSON Digite o modo de tela completa agora é o modo de tela completa do modo FELIDADE com o Angular 20 e a federação nativa, a federação de construção. Ao dividir grandes aplicativos em MFEs menores, as equipes podem escalar o desenvolvimento, implantar independentemente e melhorar o desempenho sem comprometer a experiência do usuário. Se você está trabalhando em um projeto Angular Enterprise em 2025, a arquitetura de frontend da Micro Frontend é o caminho a seguir.

Fonte