What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
iTechGuides 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 integrar Native Federation ao Angular 21, primeiro confirme qual geração do adaptador seu projeto usa: a linha v3 tem versão 21.x para Angular 21; a v4 também atende Angular 20 e 21, mas usa o pacote @angular-architects/native-federation-v4. Em seguida, configure host e remote, confira o manifesto e depure a saída de build e as solicitações do navegador. Não misture exemplos de configuração de gerações diferentes.
Qual pacote do Native Federation usar no Angular 21?
Há duas opções documentadas para Angular 21, e a escolha afeta o nome do pacote, a configuração e o runtime. A documentação da linha v3 identifica a versão 21.x do adaptador para Angular 21. A documentação da v4 orienta projetos Angular 20 e 21 a usar o pacote com sufixo -v4; o nome base sem sufixo passa a ser usado a partir do Angular 22. Consulte a documentação do adaptador Native Federation e o guia de início da v4 para confirmar o contexto da configuração que pretende adotar.
| Opção | Pacote | Configuração documentada | Runtime |
|---|---|---|---|
| Native Federation v3 para Angular 21 | @angular-architects/native-federation |
federation.config.js |
Runtime clássico descrito na documentação do adaptador v3 |
| Native Federation v4 em Angular 20/21 | @angular-architects/native-federation-v4 |
federation.config.mjs |
Faz a ponte para o runtime orchestrator |
Essa diferença não é apenas de sintaxe. A configuração ESM .mjs da v4 não deve ser copiada sem adaptação para um projeto v3 que usa .js. Verifique a versão principal do Angular CLI e os pacotes Native Federation já instalados antes de seguir comandos ou imports de um guia.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →Como integrar Native Federation no Angular 21?
Na linha v3 documentada, o schematic inicializa projetos como remote, host ou dynamic-host, criando a estrutura de federação apropriada. O exemplo de início instala o adaptador, gera um remote e um host dinâmico. Veja o guia oficial de início da linha v3; mantenha todos os exemplos dessa seção na mesma geração.
#1 Best Overall
O que cabe ao remote e ao host
O remote declara os módulos ou componentes que expõe. O host descobre a localização do remote e solicita a chave exposta correspondente, normalmente ao carregar uma rota de forma preguiçosa. Um host dinâmico usa um manifesto para relacionar nomes de remotes aos endereços de seus arquivos remoteEntry.json.
O manifesto gerado pode conter uma entrada para cada remote. O endereço de exemplo em localhost só funciona quando o remote está realmente sendo servido naquele endereço; em outro ambiente, atualize a URL para a localização disponível nesse ambiente. Confirme também que a chave usada pelo host corresponde exatamente ao que o remote expõe.
Inicialização antes do bootstrap Angular
Na estrutura de entrada documentada, o host chama initFederation(...) antes de importar o bootstrap Angular. A inicialização pode carregar informações de federação; só depois disso a aplicação é iniciada. O exemplo trata erros de inicialização e importa o bootstrap após a chamada, em vez de iniciar Angular primeiro e esperar que o manifesto esteja pronto.
Como configurar host e remote com Native Federation?
O builder do adaptador coordena duas partes: prepara os artefatos de federação, como bundles compartilhados, módulos expostos e remoteEntry.json, e então delega a compilação da aplicação ao Application Builder do Angular. O schematic preserva os alvos de build e serve do Angular e acrescenta alvos que integram o fluxo de federação. Consulte a referência do builder ao verificar qual etapa produziu uma falha.
Rank #3
- Inicialize o remote. Use o schematic da geração escolhida para criar a configuração e declarar o que será exposto.
- Inicialize o host. Para descoberta dinâmica, escolha
dynamic-hoste configure o manifesto com o nome do remote e a URL servida deremoteEntry.json. - Alinhe o contrato. Faça com que a chave que o host carrega corresponda à exposição definida no remote.
- Inicie os projetos. O fluxo de início documentado usa processos
ng serveseparados para o shell e o remote; use endereços que correspondam ao manifesto. - Valide a saída. Confira se os artefatos de federação foram produzidos e se o host consegue obter o arquivo de entrada do remote.
Os arquivos concretos variam conforme o schematic e a geração do adaptador. Em um projeto v4 para Angular 20/21, preserve a configuração ESM federation.config.mjs; em um projeto v3, siga os exemplos da linha correspondente em vez de substituir arquivos por exemplos da v4.
Como depurar um remote que não carrega?
Investigue em ordem, separando inicialização, localização do remote, contrato de exposição e resolução de dependências. Isso ajuda a distinguir uma falha de compilação Angular de um problema nos artefatos ou na entrega do remote.
- Confirme processos e ambiente. Verifique se host e remote corretos estão em execução e se as configurações de ambiente apontam para os endereços usados no teste.
- Confira o manifesto e a URL. Compare o nome do remote e o endereço de
remoteEntry.jsoncom o local realmente servido. No painel de rede do navegador, verifique se a solicitação ocorre e observe o status; no console, procure o erro associado à inicialização ou ao carregamento. - Compare as chaves expostas. Confirme que o host solicita o mesmo módulo ou componente que o remote declarou como exposição, incluindo o caminho usado no carregamento preguiçoso.
- Separe build de entrega. Se os artefatos não foram gerados, investigue o alvo de build e a saída do compilador. Se existem, mas não são encontrados, concentre-se no manifesto, na URL e no servidor do remote.
- Investigue imports de workspace. Para erros
Could not resolve, confira otsConfigpassado ao builder de federação e se ele contém os mapeamentosbaseUrlepathscorretos. - Revise dependências compartilhadas. Se host e remote independentes parecem carregar versões incompatíveis, compare suas configurações de dependências compartilhadas e as restrições de versão.
O que verificar em erros de resolução
A resolução de especificadores sem caminho relativo pelo esbuild usa o tsConfig selecionado pelo builder. A descoberta automática pode não encontrar o arquivo adequado em todos os layouts de workspace: os mapeamentos relevantes podem estar em tsconfig.app.json ou tsconfig.lib.json, não exatamente em tsconfig.json. Aponte o builder para a configuração efetivamente usada pelo app ou pela biblioteca e confira seus aliases. A referência do builder Native Federation descreve essa relação.
Compartilhamento de dependências não é uma receita universal
O repositório do projeto mostra um exemplo de dependências compartilhadas com opções como singleton e restrições de versão. Isso pode ser apropriado quando a compatibilidade do workspace exige uma instância comum, mas não deve ser copiado automaticamente. Defina as restrições conforme as versões e os requisitos reais dos remotes e do host, e use o repositório Native Federation como referência de exemplo, não como garantia de que a mesma configuração serve a qualquer aplicação.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Angular DevTools funciona em build de produção?
Para inspecionar a árvore de componentes Angular e criar perfis, use um build de desenvolvimento. A documentação do Angular v21 explica que as otimizações de produção removem recursos de depuração necessários à extensão. O ng serve usa comportamento de desenvolvimento por padrão; para depurar uma implantação, use uma configuração de build que desative a otimização em vez de presumir que um build de produção otimizado terá os mesmos recursos. Consulte a documentação Angular DevTools.
Quick Recap
Boas práticas para manter host e remote compatíveis
- Registre a geração do adaptador junto à versão do Angular. Isso evita misturar pacote, runtime e formato de configuração de versões diferentes.
- Trate o manifesto como configuração de ambiente. Cada URL precisa apontar para um remote realmente disponível no ambiente em questão.
- Mantenha explícito o contrato de exposição. O host e o remote precisam concordar sobre a chave carregada e o conteúdo exposto.
- Escolha conscientemente o tsconfig do builder. Use o arquivo com os aliases de workspace necessários, em vez de depender de uma descoberta que pode não corresponder ao layout do projeto.
- Compartilhe dependências com intenção. Singleton e versões estritas são decisões de compatibilidade, não padrões obrigatórios para todo workspace.
- Use DevTools no modo apropriado. Faça inspeção da árvore e profiling em desenvolvimento; builds otimizados de produção não mantêm os hooks necessários.
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.
