PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteiTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Para desacoplar aplicações Angular 21, primeiro escolha o sistema de build: Native Federation integra-se ao application builder baseado em ESM; Module Federation da Angular Architects segue um caminho orientado a webpack. Este artigo separa as duas opções, explica os pacotes compatíveis com Angular 21 e mostra o que decidir antes de configurar host e remotes.
O que “Module Federation” significa neste tutorial
O título usa “Module Federation” como nome da ideia de dividir uma aplicação frontend em partes carregadas por uma aplicação host. Há, porém, duas integrações diferentes a considerar no Angular 21: Webpack Module Federation, que depende de um caminho de build baseado em webpack, e Native Federation, que adota um modelo semelhante usando padrões do navegador, como módulos ES e import maps.
Os nomes e as configurações não são intercambiáveis. A escolha afeta o builder, o pacote e a configuração de host e remotes. Por isso, a Parte 1 trata da decisão arquitetural e do caminho compatível com Angular 21; não pressupõe que uma implementação ou um comando sirva para os dois modelos.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problemsComo o build do Angular 21 muda a escolha
O application builder mais novo do Angular é baseado em ESM e usa esbuild. O Angular CLI usa Vite como servidor de desenvolvimento. O sistema de build baseado em webpack continua estável e com suporte, mas não é o padrão para novas aplicações. Essas distinções são importantes porque cada integração de federação precisa ser compatível com o builder escolhido.
#1 Best Overall
O Angular recomenda o CLI para a maioria das aplicações e caracteriza pipelines de build personalizados como casos específicos. Uma aplicação fortemente acoplada a Module Federation é um exemplo que pode justificar considerar um pipeline personalizado; isso não torna webpack a escolha automática para todo projeto que queira dividir o frontend.
| Critério | Native Federation | Webpack Module Federation |
|---|---|---|
| Abordagem de build | Integra-se ao application builder do Angular e ao modelo ESM. | Usa uma integração orientada a webpack; identifique o webpack builder no projeto. |
| Pacote Angular Architects relevante para Angular 21 | @angular-architects/native-federation-v4 na documentação v4; há também documentação v3 com uma linha de adaptador 21.x. |
@angular-architects/module-federation, em uma linha para Angular 21; confira a compatibilidade da versão escolhida. |
| Modelo descrito | Modelo mental de host e remotes implementado com padrões do navegador, incluindo módulos ES e import maps. | Integração própria de Module Federation com webpack. As opções detalhadas de configuração dependem do adaptador e do projeto. |
| Quando considerar | Quando a aplicação deve permanecer no application builder e a integração escolhida oferece suporte à versão Angular usada. | Quando há uma necessidade concreta de integração com webpack e o projeto pode usar esse caminho de build. |
Essas diferenças são de integração e configuração, não evidência de que uma opção seja universalmente superior. As fontes dos projetos descrevem seus próprios caminhos; não estabelecem um vencedor por desempenho, produtividade ou adequação a toda organização.
Qual pacote Native Federation usar com Angular 21
A documentação v4 do Native Federation indica o pacote de transição @angular-architects/native-federation-v4 para Angular 20 e 21. A partir do Angular 22, essa documentação usa o nome sem sufixo, @angular-architects/native-federation. Não copie o nome de pacote da documentação do Angular 22 para um projeto Angular 21.
Recommended Free Tools
Também há uma geração anterior da documentação: a v3 descreve uma linha de adaptador 21.x voltada ao Angular 21. Isso não deve ser misturado automaticamente com as instruções v4. Escolha uma geração de documentação e siga sua configuração e notas de migração correspondentes.
A orientação do Native Federation é manter a versão do adaptador alinhada à versão do Angular CLI. Como versões e compatibilidades mudam, confira o minor exato do Angular e a versão do adaptador antes de instalar ou atualizar dependências.
O que verificar antes de fixar as versões
A tabela de compatibilidade do Angular 21 especifica estes intervalos de runtime e ferramentas. Eles são requisitos versionados para Angular 21, não recomendações de desempenho; confirme-os para o minor instalado no projeto.
Rank #3
| Componente | Compatibilidade indicada para Angular 21 |
|---|---|
| Node.js | ^20.19.0, ^22.12.0 ou ^24.0.0 |
| TypeScript | >=5.9.0 <6.0.0 |
| RxJS | ^6.5.3 ou ^7.4.0 |
Antes de adicionar federação, registre a versão do Angular CLI, o builder usado por cada aplicação e a linha do adaptador. Se host e remotes forem projetos distintos, confira cada projeto: não presuma que todos compartilham o mesmo builder ou a mesma configuração só por usarem Angular.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →Como Native Federation organiza host e remotes
O fluxo documentado para o adaptador Angular parte de uma aplicação host e de uma ou mais aplicações remotas. O adaptador envolve o sistema de build de aplicações do Angular e fornece integração de build e runtime para federação. Em termos de planejamento, a configuração precisa responder como os projetos participantes são inicializados, como cada um recebe sua configuração de federação e como o host descobre os remotes.
- Defina o host e os remotes. Identifique qual aplicação compõe a experiência inicial e quais partes serão publicadas como aplicações remotas.
- Escolha uma geração compatível do adaptador. Para Angular 21, siga integralmente as instruções v4 com o pacote com sufixo apropriado ou a documentação v3 da linha 21.x; não combine receitas das duas gerações sem validar a migração.
- Inicialize os projetos participantes e gere a configuração de federação. Use o fluxo documentado para a geração escolhida, mantendo builder e versões alinhados ao projeto Angular.
- Configure a descoberta dos remotes no host. O host precisa conhecer os remotes que deve carregar; defina essa relação conforme a configuração do adaptador adotado.
- Valide build e carregamento em seu ambiente. Verifique separadamente o build dos participantes e se o host consegue carregar os remotes configurados. A configuração concreta e o comportamento em produção dependem do projeto.
Esse roteiro descreve as responsabilidades de configuração, não um exemplo executado nem uma receita universal de arquivos e comandos. Os detalhes devem vir da documentação da geração e do adaptador efetivamente escolhidos.
Quando seguir o caminho webpack
O projeto Angular Architects mantém também uma integração de Module Federation orientada a webpack, com uma linha de pacote para Angular 21. Para usá-la, declare explicitamente que a implementação assume webpack e identifique o builder webpack do projeto. O fato de o Angular ainda suportar seu sistema de build webpack não significa que novas aplicações já o usem por padrão.
Antes de adotar essa rota, verifique se o projeto pode permanecer no builder webpack e se essa dependência atende a uma necessidade real — por exemplo, forte acoplamento a uma integração existente. A documentação considerada aqui não basta para descrever todas as escolhas de configuração do caminho webpack; use as instruções correspondentes ao adaptador e à versão exatos, sem reaproveitar configurações de Native Federation.
Free tools Windows power users keep installed
One-click scans. No signup required.
Federação exige NgModules ou zoneless?
Não. A federação não implica que novos exemplos precisem usar NgModules. O Angular recomenda componentes standalone para código novo. Nas palavras da equipe Angular: “The Angular team recommends using standalone components instead of NgModule for all new code.” A recomendação trata da organização de código novo; não transforma standalone em uma exigência específica da federação.
O Angular 21 também tem zoneless como padrão segundo o guia do Angular. Isso é contexto da plataforma, não um requisito de Native Federation ou de Webpack Module Federation. Não altere a estratégia de detecção de mudanças apenas para adotar federação.
Como decidir sem presumir ganhos
- Prefira avaliar Native Federation se quer usar o application builder do Angular e a integração compatível com ESM, respeitando o pacote e a geração adequados ao Angular 21.
- Avalie Module Federation com webpack se o projeto tem uma razão concreta para usar essa integração e aceita o builder webpack.
- Reconsidere a divisão se a necessidade de deploy independente, limites de equipe ou carregamento remoto não estiver clara. Separar builds, por si só, não prova autonomia maior, melhor desempenho ou releases mais rápidos.
- Trate os contratos como parte da arquitetura. Defina responsabilidades entre host e remotes e como o host os descobre; federação conecta aplicações, mas não decide esses limites organizacionais por você.
Para Angular 21, portanto, a pergunta prática não é simplesmente se Module Federation é “melhor” que outra opção: é qual integração corresponde ao builder, à geração do adaptador e às restrições do projeto. Fixar essas três decisões antes de configurar host e remotes evita misturar instruções incompatíveis.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
