0Pricing
Angular Academy · Aula

Federação nativa para Angular

Configure a federação de módulos no Angular.

Federação nativa para Angular é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Angular Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Angular Academy inclui 4 aulas no total.

Por que usar Native Federation

O Module Federation clássico estava vinculado ao webpack. O sistema de compilação do Angular migrou para o esbuild, então a comunidade criou o Native Federation: uma implementação da mesma ideia, independente da ferramenta de compilação e baseada em padrões da web (mapas de importação e módulos ES).

O pacote

O Native Federation para Angular está no pacote @angular-architects/native-federation. Adicione-o com o esquema da CLI do Angular, que configura o arquivo de configuração e o processo de compilação.

ng add @angular-architects/native-federation

Inicializando um host

Execute o esquema no aplicativo shell e escolha dynamic-host. Ele gera um arquivo federation.config.js e atualiza a inicialização para inicializar a federação antes que o Angular seja iniciado.

ng g @angular-architects/native-federation:init --project shell --type dynamic-host

Inicializando um remoto

Para um aplicativo funcional, execute a mesma inicialização com remote. Isso cria a configuração que expõe partes do remoto aos hosts.

ng g @angular-architects/native-federation:init --project catalog --type remote --port 4201

O arquivo federation.config.js

Essa configuração é o núcleo da federação: nomeia o remoto, lista o que ele exposes e declara as dependências shared.

// catalog/federation.config.js
module.exports = withNativeFederation({
  name: 'catalog',
  exposes: { './Routes': './src/app/catalog.routes.ts' },
  shared: { ...shareAll({ singleton: true }) },
});

Alterações na inicialização

O Native Federation requer a inicialização antes do bootstrap para que os mapas de importação estejam prontos. O esquema divide main.ts em uma etapa de inicialização que carrega bootstrap.ts.

// main.ts
import { initFederation } from '@angular-architects/native-federation';
initFederation()
  .then(() => import('./bootstrap'))
  .catch(err => console.error(err));

Listando remotos no host

O host mantém um manifesto que associa nomes de remotos ao URL de remoteEntry.json, para saber de onde buscar cada remoto em tempo de execução.

// federation.manifest.json
{
  "catalog": "http://localhost:4201/remoteEntry.json"
}

Carregando o manifesto

Passe o caminho do manifesto para initFederation. O host o lê uma vez na inicialização e, depois, pode carregar qualquer remoto listado sob demanda.

initFederation('/assets/federation.manifest.json')
  .then(() => import('./bootstrap'));

Baseado em padrões, não preso ao webpack

Como o Native Federation usa módulos ES nativos e mapas de importação, ele funciona com esbuild, Vite ou outros empacotadores. Esse desacoplamento é o motivo pelo qual se tornou a abordagem recomendada para o Angular moderno.

Servidores de desenvolvimento por remoto

Durante o desenvolvimento, cada remoto é executado em sua própria porta (ng serve --port 4201). O host aponta para esses URLs por meio do manifesto, permitindo executar toda a composição localmente.

O que o Native Federation oferece

Em resumo: compilações independentes, singletons compartilhados (uma instância do Angular), carregamento dinâmico de remotos e nenhuma dependência de um empacotador específico. As próximas lições abordam o compartilhamento de dependências e o carregamento de módulos remotos em detalhes.

Verificação rápida

Por que usar Native Federation em vez do Module Federation clássico no Angular?

Recapitulação

O Native Federation (@angular-architects/native-federation) traz a federação de módulos para o Angular baseado em esbuild usando mapas de importação. Inicialize hosts e remotos com o esquema, configure exposes e shared em federation.config.js, chame initFederation antes do bootstrap e liste os remotos em um manifesto.

Perguntas Frequentes

A aula “Federação nativa para Angular” é grátis?

Sim — o texto completo de “Federação nativa para Angular” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Angular Academy, atualize para CoddyKit PRO. O curso de Angular Academy inclui 4 aulas no total.

O que vou aprender em “Federação nativa para Angular”?

Configure a federação de módulos no Angular. Você pratica Angular Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Angular Academy?

Nenhuma experiência prévia é necessária. Angular Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Federação nativa para Angular”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Angular Academy?

Sim. Cada aula de Angular Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Arquitetura de microsserviços de frontend
  2. Federação nativa para Angular
  3. Compartilhando dependências
  4. Carregando módulos remotos
← Voltar para Angular Academy