DEV Community

Hernani Almeida
Hernani Almeida

Posted on • Edited on

17

Desacoplando frontend com module-federation Angular - Parte 1

Ferramentas necessárias:

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

Image description

Image description

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

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

Image description

Ainda na pasta mfe-host digite o seguinte comando

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

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

Image description

Image description

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

Image description

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 {}
Enter fullscreen mode Exit fullscreen mode

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 {}
Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

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

Image description

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

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

Deixo aqui meu linkedin e instagram para quem quiser me adicionar

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay