Desacoplando frontend com module-federation Angular - Parte 1

Ferramentas necessárias:

• Angular cli
• VSCode

O conceito Micro frontends e permitir aos desenvolvedores a flexibilidade de solicitar remotamente um módulo na rede e inicializar esse módulo em sua aplicação, podendo assim separar responsabilidades de uma aplicação frontend em varias aplicações.
Os microfrontends podem ajudar os desenvolvedores a focar nos requisitos funcionais e nas necessidades de negócios.
Os microfrontends podem aumentar o reuso de código na empresa e simplificar o processo de desenvolvimento, deixando a aplicação com pouco acoplamento pois possibilita a cada aplicação dentro do ambiente ter sua própria versão, seu próprio framework, seu próprio deploy e no final para o usuário isso se reflete a 1 aplicação.
Construir uma plataforma para microfrontends é muito semelhante ao de uma plataforma para microservices.

Nesse artigo vamos construir um microfrontend utilizando o framework Angular onde através da aplicação main iremos acessar outras duas aplicações remotas utilizando a ferramenta module-federation, dito isso bora codar.

Crie uma pasta artigoMFE e atraves do terminal de sua maquina entre dentro desta pasta vamos criar 3 aplicações angular através do comando ng new mfe-host, após ng new mfe-1 e após ng new mfe-2.

Temos agora 3 projetos angular criado dentro da pasta artigoMFE, digite o seguinte comando cd mfe-host no terminal na raiz da pasta artigoMFE

Dentro da pasta mfe-host digite o seguinte comando para abrir a aplicação dentro do VSCODE code .

Ainda na pasta mfe-host digite o seguinte comando

ng add @angular-architects/module-federation --project mfe-host --port 4200 --type host --skip-confirmation

Esse comando ira instalar a biblioteca do module-federation em nossa aplicação e configurar o arquivo webpack da nossa aplicação.

Feito isso crie um arquivo app-routing.module.ts na sua aplicação de maneira que a estrutura fique o seguinte.

E altere os seguintes arquivos para ficar igual os arquivos abaixo.

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { loadRemoteModule } from '@angular-architects/module-federation';

const APP_ROUTES: Routes = [
  {
    path: 'mfe-1',
    loadChildren: () =>
      loadRemoteModule({
        type: 'module',
        remoteEntry: 'http://localhost:4201/remoteEntry.js',
        exposedModule: './Module',
      }).then((m) => m.AppModule),
  },
  {
    path: 'mfe-2',
    loadChildren: () =>
      loadRemoteModule({
        type: 'module',
        remoteEntry: 'http://localhost:4202/remoteEntry.js',
        exposedModule: './Module',
      }).then((m) => m.AppModule),
  },
];

@NgModule({
  imports: [RouterModule.forRoot(APP_ROUTES)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module.';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

app.component.html

<div>
  <p><a routerLink="/mfe-1">Acesse MFE-1</a></p>
  <p><a routerLink="/mfe-2">Acesse MFE-2</a></p>
</div>
<div>
  <router-outlet></router-outlet>
</div>

Feito isso digite o seguinte comando no terminal npm run start para rodar a aplicação e clique no link abaixo:

Podemos ver na ferramenta da google na aba de Redes que nosso host tentou se comunicar a nossa aplicação remota mfe-1

No próximo artigo vamos implementar as aplicações remotas mfe-1 e mfe-2 para concluir nosso artigo, ate o próximo artigo