DEV Community

Hernani Almeida
Hernani Almeida

Posted on

Desacoplando frontend com module-federation Angular - Parte 2

Ferramentas necessárias:

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 


Enter fullscreen mode Exit fullscreen mode

Logo apos digite code . para abrir o vscode e vermos o codigo de nossa aplicação.

Image description

Mude os seguintes arquivos dentro do código.
app.component.html



<h1>Aqui e o Mfe-1</h1>


Enter fullscreen mode Exit fullscreen mode

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 {}


Enter fullscreen mode Exit fullscreen mode

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 {}


Enter fullscreen mode Exit fullscreen mode

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",
 },
});


Enter fullscreen mode Exit fullscreen mode

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

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>


Enter fullscreen mode Exit fullscreen mode

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 {}


Enter fullscreen mode Exit fullscreen mode

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 {}


Enter fullscreen mode Exit fullscreen mode

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",
 },
});


Enter fullscreen mode Exit fullscreen mode

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

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 para quem quiser acessar o projeto
Deixo aqui também meu linkedin 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.

Top comments (10)

Collapse
 
angelovso profile image
Angelo O'Dwyer • Edited

Olá, boa tarde! Sabe me informar se para diferentes versões do angular, é obrigatório usar a mesma versão do module federation? Preciso criar uma nova feature no angular 15, porém minha aplicação é toda em angular 13, então, é possível usar no angular 13 o module-federation 14.2.3 e para o angular 15 esta mesma versão ou no angular 15 eu configuro e o webpack se encarrega de acessar o remotyentry?

Collapse
 
2020nani profile image
Hernani Almeida • Edited

Tarde maninho, o ideal na minha opinião seria utilizar a versão recomendada para cada versão do angular conforme a doc do module-federation.
npmjs.com/package/@angular-archite...
Pode acontecer ali de ter conflitos em lib que sua aplicação utiliza caso as versões do angular seja diferente ali entre host/mfe. Não cheguei a implementar a mfe com versões diferentes de angular então não consigo te afirmar recomendo que leia essa doc que passei acima, e vlw por ler o artigo.

Collapse
 
iuryro profile image
Iury Castro

Muito bom, parabéns.

Collapse
 
2020nani profile image
Hernani Almeida

vlw man

Collapse
 
eric_ferreira_941d8e6de68 profile image
Eric Ferreira • Edited

Muito interesse essa abordagem! Tenho duas dúvidas:

  • Queria entender melhor como isso funciona na prática, ele roda as 3 aplicações cada um numa porta? E quando acessa a rota, como isso é renderizado? (n creio que seja via iframe rsrs)
  • Gostaria de saber como funcionaria o deploy disso, se mudaria algo. Enfim, conseguimos buildar e plublicar cada terminal a parte?

Mto bom o artigo, parabéns!

Collapse
 
2020nani profile image
Hernani Almeida

Vlw maninho, vou tentar tirar suas duvidas.
Cada aplicação e deployada de maneira separada gerando uma url de acesso, como um build/deploy de uma aplicação angular comum. Conforme você conferiu no artigo, a aplicação host, através da configuração a ser realizada dentro do webpack, utiliza essa url para acessar a aplicação mfe e renderizar o conteúdo na tela. Em tese rodando em produção host e mfe se tornam uma única aplicação frontend, porem nessa abordagem de microfrontend você tem a facilidade de separar responsabilidades no front, facilitando a manutenção e publicação de novas features.
Exemplo: Posso ter um eccomerce contendo o código de catalogo dentro do host e um mfe de checkout/carrinho integrado a esse host, se precisar realizar alguma manutenção ou adicionar uma nova feature na parte de checkout so vou precisar trabalhar no mfe e realizar o deploy somente para esse cara.

Collapse
 
eric_ferreira_941d8e6de68 profile image
Eric Ferreira

Show! Mto interessante. Sobre como isso funciona por debaixo dos panos, eu podia ver so de clonar e rodar o seu projeto aqui rsrs, mas saberia me dizer como funciona? Imagino q n seja via iframe, ele de alguma forma consegue acessar os bundles do mfe e renderiza, algo do tipo?

Thread Thread
 
2020nani profile image
Hernani Almeida

Nao e via iframe nao maninho, e via webpack, atraves da lib e possivel o compartilhamentos do module do mfe para o host, nao so de module mas ha tambem a possibilidade de compartilhar components.

Collapse
 
david_barbosa_d07e4989818 profile image
David Barbosa

Boa tarde brother, parabéns pelo conteúdo! Sabe me dizer se consigo abrir um host dentro de outro host?

Collapse
 
2020nani profile image
Hernani Almeida

agradecido maninho, em tese consegue sim porem tera que transformar um aplicacao em host e adaptar a outra para ser um modulo dessa.