O que é MicroFrontends?

MicroFrontends é um estilo de arquitetura para criar aplicativos da Web, dividindo-os em módulos menores, independentes e fracamente acoplados. Cada módulo, ou MicroFrontend, é desenvolvido e implantado de forma independente, com seu próprio conjunto de dependências, tecnologias e equipes.

A implementação do MicroFrontend em Angular 15 envolve a divisão do aplicativo em partes menores que podem ser desenvolvidas e implantadas de forma independente. Cada MicroFrontend deve ter seu próprio aplicativo Angular, com seu próprio conjunto de componentes, serviços e módulos.

Principais etapas para implementar o MicroFrontend em Angular 15:

1. Divida o aplicativo em partes menores e independentes com base no domínio de negócios ou na funcionalidade.
2. Crie um aplicativo Angular para cada MicroFrontend, com seu próprio conjunto de componentes, serviços e módulos.
3. Defina um contrato de API para comunicação entre MicroFrontends. Isso pode ser APIs RESTful, WebSockets ou eventos personalizados.
4. Use um plug-in de federação de módulo para carregar MicroFrontends dinamicamente no aplicativo principal em tempo de execução. A federação de módulo é um recurso do Webpack que permite que vários aplicativos compartilhem código em tempo de execução.
5. Implemente um módulo compartilhado que contenha código e componentes comuns que possam ser usados ​​por vários MicroFrontends.
6. Use um sistema de gerenciamento de estado centralizado, como Redux ou NgRx, para gerenciar o estado do aplicativo nos MicroFrontends.
7. Implemente um sistema de design de interface do usuário consistente em MicroFrontends para garantir uma experiência de usuário coesa.

MicroFrontends em Angular usando Module Federation

Configuração do Aplicativo HOST

1. Criando um aplicativo host

ng new angular-mfe-example --create-application="false"

2. Criar aplicativo host (aplicativo principal)

É o aplicativo principal onde estamos obtendo todos os aplicativos remotos e configuramos o roteamento para eles.

ng g application host

4. Atualize a rota para adicionar o caminho ao administrador e altere o AppComponent

Adicionar rota a app-routing.module.ts

Limpe app.component.html e adicione o código abaixo

5. Execute o aplicativo

ng serve host

Criando aplicativos e configurações remotas

1. Crie um aplicativo remoto 1 e um aplicativo remoto 2

ng new remoteapp1
ng new remoteapp2

ng g m home
ng g c home

      
                

                    
                    
                
            

      
                

                    
                    
                
            

5. Agora adicionando o Pacote de Federação de Módulos aos três aplicativos

ng add @angular-architects/module-federation --project host --port 4200

ng add @angular-architects/module-federation --project remoteapp1 --port 5001

ng add @angular-architects/module-federation --project remoteapp2 --port 5002

6. Agora exponha os módulos dos Aplicativos remotos para esse webpack.config.js aberto em remoteapp1 e remoteapp2

7. Capture os módulos expostos no aplicativo host webpack.config.js

8.Agora configure o roteamento no aplicativo host app.module.ts

9. Depois de configurar as rotas, você está recebendo erros como módulo não encontrado. você precisa criar um decl.d.ts na pasta do aplicativo host.

10. Então, se você receber o erro abaixo em remoteapp1 e remoteapp2 . em seguida, adicione o home.module.ts em tsconfig (arquivos).

11. Agora reserve os controles remotos e modifique o host app.component.ts como abaixo

12. Agora abra o aplicativo host no navegador e teste-o.

Trabalhando……

Link do repositório:https://github.com/GuruNadh552/Micro-Frontends-in-Angular

Obrigado se você tiver alguma dúvida. deixe a mensagem nos comentários