Carregando módulos remotos
Carregue microsserviços de frontend remotos dinamicamente.
Carregando módulos remotos é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 4 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.
Incluindo um remoto em tempo de execução
Depois que um remoto expõe um módulo e o host conhece seu URL, o host o carrega sob demanda com loadRemoteModule. Esta é uma importação dinâmica por HTTP: nada do remoto é incluído no pacote da compilação do host.
API loadRemoteModule
loadRemoteModule recebe o nome do remoto (do manifesto) e a chave exposta (do exposes do remoto). Ele retorna uma promessa desse módulo.
import { loadRemoteModule } from '@angular-architects/native-federation';
const m = await loadRemoteModule('catalog', './Routes');Carregamento tardio de rotas remotas
O padrão mais limpo expõe um arquivo de rotas de cada remoto e faz seu carregamento tardio no roteador do host com loadChildren, para que o remoto seja carregado somente quando sua rota for acessada.
export const routes: Routes = [
{
path: 'catalog',
loadChildren: () =>
loadRemoteModule('catalog', './Routes').then(m => m.CATALOG_ROUTES),
},
];Carregando um componente individual
Você também pode expor e carregar um componente independente individual, o que é útil para incorporar um widget em vez de uma área inteira de rotas.
{
path: 'widget',
loadComponent: () =>
loadRemoteModule('dashboard', './Widget').then(m => m.WidgetComponent),
}Expondo no lado remoto
Para que o host possa carregá-lo, o remoto deve listar a exportação em seu mapa exposes. A chave é o que o host passa para loadRemoteModule.
// remote federation.config.js
exposes: {
'./Routes': './src/app/catalog.routes.ts',
'./Widget': './src/app/widget.component.ts',
}Resolução dinâmica do manifesto
Como o host lê o manifesto na inicialização, você pode trocar os URLs dos remotos por ambiente (desenvolvimento, homologação, produção) sem recompilar o host, simplesmente disponibilizando um arquivo de manifesto diferente.
Lidando com falhas de carregamento
Os remotos são carregados pela rede e podem falhar (modo offline, implantação em andamento). Envolva os carregamentos com tratamento de erros para que um único remoto com problemas não derrube todo o shell.
loadRemoteModule('catalog', './Routes')
.then(m => m.CATALOG_ROUTES)
.catch(() => import('./fallback.routes').then(m => m.FALLBACK_ROUTES));Passando dados entre os limites
A comunicação entre o host e o remoto usa serviços singleton compartilhados ou o roteador, não importações diretas. Um serviço de autenticação compartilhado (singleton) permite que um remoto leia o usuário atual definido pelo host.
Versionamento e contratos
A chave exposta (por exemplo, ./Routes) e seu formato formam um contrato. Alterar o formato da exportação pode quebrar os hosts que a carregam, portanto trate os módulos expostos como uma API pública e versione-os com cuidado.
Estratégias de pré-carregamento
Você pode pré-carregar um remoto de forma antecipada depois que o aplicativo ficar ocioso, para tornar a navegação posterior instantânea e ainda manter o carregamento inicial leve. Isso equilibra a velocidade de inicialização e a velocidade percebida de navegação.
Fluxo de ponta a ponta
Recapitulando o caminho em tempo de execução: o host lê o manifesto, o usuário navega até uma rota federada, loadRemoteModule busca o remoteEntry.json do remoto, os singletons compartilhados são reutilizados e as rotas ou o componente do remoto são renderizados dentro do shell do host.
Verificação rápida
Como um host carrega um recurso remoto de forma tardia?
Recapitulação
Os hosts carregam os remotos em tempo de execução com loadRemoteModule(name, key), geralmente dentro de loadChildren/loadComponent para rotas carregadas de forma tardia. Os remotos precisam expor a chave com expose; o manifesto resolve as URLs de acordo com o ambiente. Trate as falhas de carregamento de forma adequada, comunique-se por meio de singletons compartilhados e considere os módulos expostos como contratos versionados.
Perguntas Frequentes
A aula “Carregando módulos remotos” é grátis?
Sim — o texto completo de “Carregando módulos remotos” é 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 “Carregando módulos remotos”?
Carregue microsserviços de frontend remotos dinamicamente. 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 4 de 4.
Quanto tempo leva a aula “Carregando módulos remotos”?
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
- Arquitetura de microsserviços de frontend
- Federação nativa para Angular
- Compartilhando dependências
- Carregando módulos remotos