Compartilhando dependências

Se o host e três remotos incluírem cada um sua própria cópia do Angular, o navegador baixará o Angular quatro vezes e, pior ainda, acabará com várias instâncias do Angular, o que rompe a injeção de dependências. O compartilhamento garante que uma única cópia seja carregada uma vez e reutilizada por todos.

Em federation.config.js, o objeto shared declara quais dependências são compartilhadas entre o host e os remotos. O Native Federation elimina as duplicatas em tempo de execução.

shareAll() compartilha todas as dependências do seu package.json com uma única configuração, o ponto de partida comum. Depois, você pode substituir a configuração de pacotes específicos.

singleton: true força exatamente uma instância de um pacote em todo o aplicativo. O núcleo do Angular, o RxJS e o roteador MUST ser singletons; duas cópias de @angular/core significam duas árvores de injetores e erros em tempo de execução.

Quando os remotos solicitam versões diferentes, a federação escolhe uma versão compatível. strictVersion: true gera um erro quando há incompatibilidade, em vez de carregar silenciosamente uma versão divergente, revelando os problemas antecipadamente.

Uma biblioteca compartilhada de sistema de design ou autenticação também deve ser um singleton, para que o estado (como o usuário atual) seja consistente. Compartilhe-a explicitamente pelo nome.

requiredVersion: 'auto' lê a versão do seu package.json, para que você não precise defini-la manualmente. Isso mantém a configuração sincronizada à medida que você atualiza as dependências.

Cada compilação gera metadados sobre seus pacotes compartilhados. No momento do carregamento, a federação compara as versões entre o host e os remotos e disponibiliza um único módulo compartilhado por meio do mapa de importação, para que o navegador o busque apenas uma vez.

Esquecer de compartilhar o Angular é o erro clássico: o aplicativo parece funcionar e depois gera erros enigmáticos como “NG0203: inject() must be called from an injection context”, porque existem duas cópias do Angular. Compartilhá-lo como singleton evita isso.

Implantações independentes podem se afastar umas das outras. As equipes devem concordar com um intervalo compartilhado para os pacotes do framework e atualizar as versões de forma coordenada, pois um host no Angular 18 não pode compartilhar com segurança com um remoto que exige o Angular 17.

Às vezes, um remoto precisa de sua própria cópia isolada de um pequeno utilitário. Você pode excluí-lo do compartilhamento para que ele seja incluído no pacote de forma privada, aceitando o tamanho duplicado em troca da independência.

Quais pacotes devem ser singletons?

Declare as dependências shared (geralmente por meio de shareAll) para que o host e os remotos carreguem uma única cópia. Defina o framework e as bibliotecas com estado (@angular/core, roteador, RxJS, sua biblioteca de autenticação) como singleton: true; use strictVersion e requiredVersion: 'auto' para detectar divergências. Esquecer de compartilhar o Angular causa erros de DI.