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

Ferramentas necessárias:

* [Angular cli] (https://angular.io/cli)
* [VSCode] (https://code.visualstudio.com/download)
* [Artigo Parte 1] (https://dev.to/2020nani/desacoplando-frontend-com-module-federation-angular-parte-1-5enm)

Vamos continuar a implementação da nossa aplicação, abra o terminal na pasta `mfe-1` e rode o seguinte comando para instalar a lib do module-federation e configurar o webpack da aplicação.
```
ng add @angular-architects/module-federation --project mfe-1 --port 4201 --type remote --skip-confirmation 
```
Logo apos digite code . para abrir o vscode e vermos o codigo de nossa aplicação.

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

Mude os seguintes arquivos dentro do código.
`app.component.html`
```
<h1>Aqui e o Mfe-1</h1>
```

`app.module.ts`
```
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { CommonModule } from '@angular/common';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [AppComponent],
  imports: [CommonModule, AppRoutingModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}
```
Detalhe que veja que passamos no import desse module o **CommomModule** pois esse module da aplicação e um module filho da nossa aplicação host.

`app-routing.module.ts`
```
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';

const MFE1_ROUTES: Routes = [
  {
    path: '',
    component: AppComponent,
  },
];

@NgModule({
  imports: [RouterModule.forChild(MFE1_ROUTES)],
  exports: [RouterModule],
})
export class AppRoutingModule {}
```
Outro detalhe aqui tambem, passamos no nosso RouterModule como **RouterModule.forChild** pois essa rota será filha da rota root da nossa aplicação host.
`webpack.config.js`
```
const {
  shareAll,
  withModuleFederationPlugin,
} = require("@angular-architects/module-federation/webpack");

module.exports = withModuleFederationPlugin({
  name: "mfe-1",

  exposes: {
    "./Module": "./src/app/app.module.ts",
  },

  shared: {
    ...shareAll({
      singleton: true,
      strictVersion: true,
      requiredVersion: "auto",
 },
});
```

Feito isso digite o seguinte comando no terminal para rodar a aplicação `npm run start` e acesse nosso host e clique no link `Acesse Mfe-1` e podemos ver nosso mfe sendo acessado via host.


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

Siga os mesmos passos dentro da pasta onde foi criado o projeto mfe-2, porem para instalar a lib do module-federation e configurar o webpack digite o seguinte comando no terminal.
`ng add @angular-architects/module-federation --project mfe-2 --port 4202 --type remote --skip-confirmation`
Após isso ajuste os seguintes arquivos para ficar assim.
Mude os seguintes arquivos dentro do código.

`app.component.html`
```
<h1>Aqui e o Mfe-2</h1>
```

`app.module.ts`
```
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { CommonModule } from '@angular/common';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [AppComponent],
  imports: [CommonModule, AppRoutingModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}
```
Detalhe que veja que passamos no import desse module o **CommomModule** pois esse module da aplicação e um module filho da nossa aplicação host.

`app-routing.module.ts`
```
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';

const MFE2_ROUTES: Routes = [
  {
    path: '',
    component: AppComponent,
  },
];

@NgModule({
  imports: [RouterModule.forChild(MFE2_ROUTES)],
  exports: [RouterModule],
})
export class AppRoutingModule {}
```
Outro detalhe aqui tambem, passamos no nosso RouterModule como **RouterModule.forChild** pois essa rota será filha da rota root da nossa aplicação host.

`webpack.config.js`
```
const {
  shareAll,
  withModuleFederationPlugin,
} = require("@angular-architects/module-federation/webpack");

module.exports = withModuleFederationPlugin({
  name: "mfe-2",

  exposes: {
    "./Module": "./src/app/app.module.ts",
  },

  shared: {
    ...shareAll({
      singleton: true,
      strictVersion: true,
      requiredVersion: "auto",
 },
});
```

Feito isso digite o seguinte comando no terminal para rodar a aplicação `npm run start` e acesse nosso host e clique no link `Acesse Mfe-2` e podemos ver nosso mfe sendo acessado via host.


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

Podemos agora a cada clique no link acessar remotamente nossas aplicações `mfe-1` e `mfe-2` o que nos possibilita, por exemplo fazer alterações e subir um deploy na aplicação mfe-1 sem que isso interfira na aplicação mfe-2 pois e um outro codigo totalmente independente.

E isso ai devs mas um conhecimento passado, deixarei no meu [github](https://github.com/2020nani/mfe-article) para quem quiser acessar o projeto
Deixo aqui também meu [linkedin](https://www.linkedin.com/in/nanialmeida/) para quem quiser me adicionar, grato a todos que leram este artigo e bora aprender galera.
*Observação: * Como um plus numa terceira parte irei me desafiar a construir um componente angular utilizando module-federation para servir como lib de algum componente para se usar nas aplicações, exemplo um botão padrão para usar em todas as aplicações, e compartilho aqui numa terceira parte.