Free tools Windows power users keep installed
One-click scans. No signup required.
Para integrar Native Federation ao Angular 21, primeiro confirme qual geração do adaptador o projeto usa: a linha v3 21.x ou o adaptador v4, publicado para Angular 20 e 21 com o pacote @angular-architects/native-federation-v4. Eles não são intercambiáveis: confira pacote, configuração e instruções antes de executar comandos ou copiar exemplos. A seguir, veja como host e remote se conectam e como localizar falhas de inicialização, resolução de módulos e depuração.
Qual pacote do Native Federation usar no Angular 21?
O Angular 21 pode aparecer em duas configurações documentadas. A linha v3 do adaptador Angular tem versões 21.x voltadas ao Angular 21. Já o Native Federation v4 oferece suporte ao Angular 20 e 21 usando o pacote com sufixo -v4. A documentação do v4 usa o nome sem sufixo a partir do Angular 22.
As an Amazon Associate I earn from qualifying purchases.
| Escolha | Pacote | Configuração documentada | Quando faz sentido |
|---|---|---|---|
| Adaptador v3 para Angular 21 | @angular-architects/native-federation |
Exemplos v3 usam federation.config.js. |
Manter ou configurar um projeto Angular 21 que já segue a geração v3. |
| Native Federation v4 em Angular 20/21 | @angular-architects/native-federation-v4 |
Os exemplos de instalação e migração v4 usam federation.config.mjs e fazem a ponte para o runtime do orchestrator. |
Projeto que adotou deliberadamente a geração v4. |
Essas diferenças são específicas das gerações documentadas; não copie a configuração .mjs do v4 para um projeto v3 nem suponha que o nome de pacote v4 sem sufixo se aplique ao Angular 21. Consulte a documentação do adaptador Angular Native Federation e o guia de início do Native Federation da geração que corresponde ao projeto.
Como configurar host e remote com Native Federation?
O esquema de configuração separa o aplicativo que expõe funcionalidades, o remote, do aplicativo que as consome, o host. O esquema documentado permite inicializar projetos como remote, host ou dynamic-host. Um host dinâmico usa um manifesto para associar o nome de cada remote ao endereço do respectivo remoteEntry.json.
#1 Best Overall
- Confira os projetos e as versões. Identifique o major do Angular CLI, o pacote instalado e a geração do adaptador antes de seguir um exemplo.
- Inicialize as funções necessárias. Use o esquema de início correspondente para gerar a configuração de remote e host — ou
dynamic-hostquando os remotes forem definidos por manifesto. O guia v3 mostra a instalação do adaptador e a inicialização de um remote e de um host dinâmico; siga o guia v4 separadamente se essa for a geração adotada. - Confira o manifesto do host dinâmico. Em
federation.manifest.json, cada chave identifica um remote e seu valor aponta para oremoteEntry.jsoncorrespondente. O endereço de localhost mostrado na documentação é apenas um exemplo: use um endereço que o remote realmente sirva no ambiente de destino. - Verifique a inicialização do navegador. Na estrutura v3 documentada, o ponto de entrada chama
initFederation(...), trata falhas de inicialização e só depois importa o bootstrap do Angular. Mantenha essa ordem: o runtime precisa ser inicializado antes do carregamento do aplicativo. - Alinhe exposição e consumo. Confirme que o remote expõe o módulo ou componente pretendido e que o host solicita exatamente a mesma chave exposta. O guia de início demonstra o carregamento lazy do componente exposto.
Os esquemas e os nomes de configuração variam conforme a geração. Para a forma de configuração v4, use o guia Angular v4; para a inicialização e o fluxo v3, consulte o guia de início do Native Federation e os esquemas documentados.
O que o builder faz durante build e serve?
O adaptador integra a etapa de federação ao build Angular. O builder prepara os artefatos de Native Federation — incluindo bundles compartilhados, módulos expostos e remoteEntry.json — e delega a compilação do aplicativo ao Application Builder do Angular. O esquema também acrescenta um alvo de serve que entende a federação, mantendo os alvos subjacentes de build e serve do Angular.
Essa divisão ajuda a delimitar a origem de uma falha: erro de compilação do aplicativo, saída de federação ausente ou remote que não está sendo servido. A documentação do builder descreve o alvo como “a thin wrapper around @angular/build:application”. Consulte a referência do builder para detalhes sobre os alvos.
Como depurar um remote que não carrega?
Faça as verificações na ordem do fluxo: processo e ambiente, manifesto e resposta do remote, chave exposta, resolução de dependências e, por último, ferramentas de inspeção do Angular. Isso ajuda a separar problemas de disponibilidade dos problemas de configuração.
- Confirme os processos e o ambiente. Verifique se host e remote foram iniciados como os projetos esperados e com a configuração apropriada. O fluxo de início documentado executa processos
ng serveseparados para remote e shell. - Inspecione endereço e resposta. Confira a entrada do manifesto e abra as ferramentas de desenvolvimento do navegador para verificar a solicitação de
remoteEntry.json, sua resposta e eventuais erros no console. Um manifesto válido não garante que o endereço esteja acessível no ambiente atual. - Compare a chave exposta com a importada. Verifique o caminho do módulo ou componente exposto no remote e confirme que o host solicita essa mesma chave.
- Investigue erros
Could not resolveem bibliotecas do workspace. Confira otsConfigfornecido ao builder de federação. A resolução de especificadores sem caminho explícito depende das configurações e dos mapeamentosbaseUrl/pathsdesse arquivo. A descoberta automática pode não encontrar o arquivo relevante se o workspace usa, por exemplo,tsconfig.app.jsonoutsconfig.lib.jsonem vez de umtsconfig.jsonadequado. - Revise dependências compartilhadas. Se host e remote compilados separadamente parecem carregar versões incompatíveis, avalie a configuração de compartilhamento e as restrições de versão em função das dependências reais do workspace. O repositório mostra opções como singleton e versão estrita como exemplo, não como exigências universais.
Para o diagnóstico do builder e de tsConfig, veja a referência do builder. Para entender o manifesto e o fluxo de host e remote, consulte o guia de início. O repositório do projeto é útil para examinar exemplos de configuração de dependências compartilhadas.
Angular DevTools funciona em build de produção?
Para inspecionar a árvore de componentes Angular e perfilar o aplicativo, use Angular DevTools com um build de desenvolvimento. A documentação do Angular v21 explica que as otimizações de produção removem recursos de depuração de que a extensão precisa. ng serve usa comportamento de desenvolvimento por padrão; se precisar depurar um aplicativo implantado, use uma configuração de build que desative a otimização, em vez de esperar que a extensão funcione em uma build de produção otimizada.
Veja os requisitos na documentação Angular DevTools v21.
Quick Recap
Boas práticas para manter a integração estável
- Registre junto ao projeto qual geração do adaptador está em uso e mantenha exemplos de pacote, runtime e configuração coerentes com ela.
- Trate o endereço do manifesto como configuração de ambiente: valide que o remote serve o
remoteEntry.jsonno host e no ambiente em que a aplicação será executada. - Escolha explicitamente o
tsConfigrelevante quando os aliases e caminhos do workspace não forem capturados pela descoberta automática do builder. - Configure dependências compartilhadas a partir das versões e necessidades de compatibilidade do workspace. Não adote
singletonou restrição estrita de versão apenas por aparecerem em um exemplo. - Ao depurar, diferencie compilação Angular, geração de artefatos federados, disponibilidade do remote e inicialização do runtime; cada etapa aponta para uma classe diferente de causa.
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.
