Desacoplando frontend com module-federation Angular - Parte 2
Hernani Almeida

Hernani Almeida @2020nani

About: Meu nome e Hernani, 40 anos e sou Desenvolvedor Fullstack, curto aprender e transferir conhecimento na área de desenvolvimento.

Joined:
Dec 9, 2021

Desacoplando frontend com module-federation Angular - Parte 2

Publish Date: Jun 3 '23
23 10

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 e instagram 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.

Comments 10 total

  • Iury Castro
    Iury CastroFeb 16, 2024

    Muito bom, parabéns.

  • Angelo O'Dwyer
    Angelo O'DwyerMar 3, 2024

    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?

    • Hernani Almeida
      Hernani AlmeidaMar 9, 2024

      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.

  • David Barbosa
    David BarbosaMay 24, 2024

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

    • Hernani Almeida
      Hernani AlmeidaJun 15, 2024

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

  • Eric Ferreira
    Eric FerreiraAug 14, 2024

    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!

    • Hernani Almeida
      Hernani AlmeidaAug 15, 2024

      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.

      • Eric Ferreira
        Eric FerreiraAug 15, 2024

        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?

        • Hernani Almeida
          Hernani AlmeidaAug 15, 2024

          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.

Add comment