Microfrontends com React, Angular e WU
Integre React e Angular com WU Framework: shell, adapters, comunicação e migração gradual. Explore também exemplos React/Vue e bindings para Svelte e Lit.
Este guia desenvolve o caso de React e Angular como exemplo de integração. Para trabalhar com Svelte, Stimulus ou qualquer outra tecnologia incluída, consulte o catálogo completo de adapters. WU usa um contrato de ciclo de vida independente do framework.
Manter cada framework e compartilhar um contrato
Uma página pode hospedar uma capacidade React e outra Angular sem converter seus componentes para o mesmo renderer. Cada app mantém seu build; o shell fornece um contêiner e WU coordena seu ciclo de vida. A mesma abordagem permite uma migração gradual: substitua uma capacidade por vez e preserve as rotas de acesso do produto.
Isso exige adaptar as entradas das aplicações. Uma SPA que controla todo o documento não fica integrada apenas ao adicionar sua URL ao catálogo. Ela deve montar dentro do contêiner recebido e liberar seus recursos ao desmontar.
React: registrar o renderer usado pela aplicação
O adapter React recebe o componente raiz e as instâncias de React e ReactDOM. Use o mesmo runtime do seu build; o guia de integrações mostra o registro com runtime explícito e a montagem a partir do Astro.
O percurso completo para começar é criar uma app React, adicionar Vue e compartilhar um contador. O último exemplo inclui fontes e ZIP; permite verificar mudanças nos dois renderers e a limpeza ao desmontar.
Angular: escolher o adapter correto
WU inclui entradas diferentes para aplicações baseadas em módulos, componentes standalone e Angular Elements. Escolha conforme a arquitetura da aplicação, não pelo nome do contêiner.
| Aplicação Angular | API de WU | O que preparar |
|---|---|---|
| Baseada em NgModule | register |
Módulo raiz, plataforma e seletor raiz |
| Componente standalone | registerStandalone |
Componente, configuração e funções de criação do Angular |
| Angular Elements | registerElement |
Dependência Angular Elements e nome do custom element |
Consulte assinaturas e opções na referência de adapters. O CLI oferece um template Angular com configuração de build e registro standalone: revise os arquivos em templates do CLI antes de transferir uma aplicação existente.
Framework 4 suporta atualização de inputs standalone, montagem zoneless e aplicações com Zone.js. Keep-alive pausa e retoma o detector de mudanças do componente. Veja a matriz de adapters para opções e versões verificadas.
Comunicação entre React e Angular
Mantenha o estado visual em cada renderer. Compartilhe dados pelo store, fatos por eventos e operações por contratos/RPC. No Framework 4, bindings dentro de uma microapp usam sua facade e identidade; declare as solicitações e grants necessários. Fora de uma montagem WU, bindings standalone podem usar o runtime global.
Os exemplos de contador compartilhado e serviço de soma por RPC ensinam os contratos usando React e Vue. Ao levá-los para Angular, preserve os contratos e adapte a assinatura, a atualização da interface e a limpeza ao seu ciclo de vida.
Vue, Svelte, Lit e outros renderers
O pacote também publica adapters para Vue, Svelte, Preact, Solid, Lit, Vanilla, Alpine, Qwik, Stencil, HTMX e Stimulus. Astro e Next têm integrações de shell. O catálogo de adapters descreve suas diferenças; os templates distinguem o suporte de geração do pipeline completo de cada framework.
Antes de migrar outra capacidade, verifique montagem, navegação, estilos, comunicação e desmontagem com as versões do seu projeto. Use produção para revisar os assets publicados e diagnóstico se uma app ficar vazia.