Desacoplando frontend com module-federation Angular - Parte 1
Tags: modulefederation, javascript, microfrontend, angular
Published: 2023-06-03 13:28:03

Ferramentas necessárias:

* [Angular cli] (https://angular.io/cli)
* [VSCode] (https://code.visualstudio.com/download)

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`.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dy24rf9m5sp9kqjp4n0t.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ewjk12ynq2e3kc0t8jx.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ziw5odv2j4bwy31wkiyh.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/asi0dvgq0aus8qsyknk8.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/euc9mff16hd9e4nkelzb.png)

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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vmrp3j5fwvw2d0iyu74j.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q5n7hfevkpu974ycp7kn.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/74j5zoiveenc4ov6s8be.png)

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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mf4mzqtddbaybk29z6yh.png)

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cy532tffcdnbcnn5pkc8.png)

No próximo [artigo](https://dev.to/2020nani/desacoplando-frontend-com-module-federation-angular-parte-2-4le1) vamos implementar as aplicações remotas `mfe-1` e `mfe-2` para concluir nosso artigo, ate o próximo artigo