O Angular continua a evoluir, introduzindo melhorias significativas para os desenvolvedores. Desde a versão 17, o Angular CLI adotou um construtor baseado em ESBuild , substituindo a solução original com Webpack . Além disso, o uso de módulos não é mais obrigatório, já que o Angular agora prioriza componentes independentes (Standalone Components).

No contexto de microfrontends (MFE), a Federação de Módulos desempenha um papel fundamental ao permitir a criação de aplicações web modulares, escaláveis ​​e de fácil manutenção, através da composição de partes desenvolvidas independentemente em tempo de execução. Essa abordagem foi introduzida pela primeira vez no Webpack 5, trazendo o conceito de microsserviços para o frontend.

A Federação Nativa é uma técnica emergente que aproveita as funcionalidades nativas do JavaScript e os módulos ECMAScript (ESM) para implementar micro front-ends sem ferramentas de compilação como o Webpack . Ela utiliza importações dinâmicas e o sistema ESM para federar módulos, simplificando o processo.

Com a mudança do Angular CLI do Webpack para o ESBuild, novos desafios surgem ao adotar a arquitetura MFE. É aqui que a Federação Nativa se torna particularmente relevante, especialmente para projetos que utilizam o Angular v17 ou versões mais recentes.

Neste tutorial, vamos construir um MFE simples usando Angular e Federação Nativa, utilizando o @angular-architects/native-federationpacote para agilizar o processo de desenvolvimento.

Criando o espaço de trabalho Angular

Comece criando um novo espaço de trabalho Angular para hospedar seus diferentes MFEs. Certifique-se de ter o Angular CLI instalado localmente e execute o seguinte comando:

ng new angular-mfe-native-federation --create-application=false

Isso gera um espaço de trabalho limpo para o desenvolvimento de vários projetos usando a arquitetura MFE.

A imagem a seguir é o resultado do comando anterior:

Criando aplicações/projetos Angular

Em seguida, vamos gerar os aplicativos. Criaremos um Shellaplicativo e um Productsaplicativo (nosso primeiro MFE). Para simplificar, vamos nos limitar a esses dois por enquanto.

Para gerar o aplicativo Shell, execute:

ng generate application shell --prefix app-shell

Você deverá ver um projeto recém-criado:

Agora, repita o comando para o Productsaplicativo:

ng generate application products --prefix app-products

Agora você tem dois aplicativos em seu espaço de trabalho.

Adicionando o Angular Material

Para ajudar a estilizar os aplicativos, usaremos o Angular Material . Use o seguinte esquema:

ng add @angular/material

Você pode encontrar erros, portanto, certifique-se de que o Angular Material seja adicionado a cada projeto individualmente também:

ng add @angular/material --project shell
ng add @angular/material --project products

Ajustando os estilos para cada projeto

Se os estilos não forem exibidos corretamente após a adição do Angular Material, abra o angular.jsonarquivo e verifique se styles.scsso tema Material selecionado está listado.

"styles": [
  "@angular/material/prebuilt-themes/azure-blue.css",
  "projects/shell/src/styles.scss"
],

Com essa alteração, o CSS deverá ser exibido corretamente ao executar e compilar os projetos.

Adicionando a Federação Nativa ao projeto

Para habilitar o conceito de MFE, adicione a Federação Nativa instalando:

npm i -D @angular-architects/native-federation

Este pacote será instalado como uma dependência de desenvolvimento e também adicionará as dependências de produção necessárias ao package.jsonarquivo.

Configurando o aplicativo Shell (host)

Em seguida, configure o Shell como o host capaz de carregar os servidores remotos (MFEs):

ng g @angular-architects/native-federation:init --project shell --port 4200 --type dynamic-host

O aplicativo Shell será executado na porta 4200.

Vamos nos concentrar no desenvolvimento deste projeto antes de passarmos para o próximo.

Criando um componente de cabeçalho

Gere um componente de cabeçalho para navegação entre MFEs usando o Angular CLI:

ng g c header --project shell

Note que, por padrão, todos os componentes são independentes e não estamos mais usando NgModules.

Atualize header.component.htmlcom:

<mat-toolbar>
  <button mat-icon-button [routerLink]="['/']">
    <mat-icon>home</mat-icon>
  </button>
  <button mat-button [routerLink]="['/products']">
    Products
  </button>
</mat-toolbar>

Trata-se de uma barra de ferramentas Material simples com um ícone de casa que permite retornar à página inicial e um botão que permite ao usuário navegar até o aplicativo Produtos.

O header.component.tsarquivo terá a seguinte aparência:

import { Component } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatToolbarModule } from '@angular/material/toolbar';
import { RouterLink } from '@angular/router';

@Component({
  selector: 'app-shell-header',
  imports: [RouterLink, MatIconModule, MatToolbarModule, MatButtonModule],
  templateUrl: './header.component.html'
})
export class HeaderComponent { }

Estamos importando os módulos Material necessários. Como este componente está sendo usado apenas para roteamento, não precisamos adicionar nenhuma lógica, pois o Angular cuidará disso para nós. E, visto que não precisamos de nenhum CSS personalizado para este exemplo, também podemos excluir o header.component.scssarquivo, juntamente com sua entrada no arquivo HeaderComponent.

Criando um componente inicial

Em seguida, gere uma página inicial básica que possa ser exibida por padrão ao carregarmos nossa aplicação Angular:

ng g c header --project shell

Este componente exibirá um cartão Material com a palavra ‘Home’ (Início). Aqui está o conteúdo do home.component.tsarquivo:

import { Component } from '@angular/core';
import { MatCardModule } from '@angular/material/card';

@Component({
  selector: 'app-shell-home',
  imports: [MatCardModule],
  template: `
    <mat-card appearance="outlined">
      <mat-card-content>Home</mat-card-content>
    </mat-card>
  `
})
export class HomeComponent { }

Para este exemplo, vamos manter as coisas simples, mas, claro, você pode adicionar um design bonito à sua página inicial.

Agora podemos passar para a aplicação dos produtos.

Configurando o aplicativo MFE1 (remoto)

Transforme o productsprojeto em um MFE:

ng g @angular-architects/native-federation:init --project products --port 4201 --type remote

Este projeto será executado na porta 4201. Ajuste a porta projects/shell/public/federation.manifest.jsontambém:

{
	"products": "http://localhost:4201/remoteEntry.json"
}

Ao adicionar outros repositórios remotos ao seu projeto, você também precisará alterar este arquivo de acordo.

Em seguida, vamos modificar o AppComponentinterior do productsprojeto:

import { Component } from '@angular/core';
import { MatCardModule } from '@angular/material/card';

@Component({
  selector: 'app-products-root',
  imports: [MatCardModule],
  template: `
    <mat-card appearance="outlined">
      <mat-card-content>Products App</mat-card-content>
    </mat-card>
  `
})
export class AppComponent { }

Novamente, estamos mantendo tudo simples, e você poderá adicionar qualquer design necessário a este projeto para que seu MFE funcione corretamente.

Adicionando rotas ao aplicativo Shell

Agora é hora de juntar tudo! Vamos voltar ao app.routes.tsarquivo de projeto do shell e adicionar as rotas:

import { loadRemoteModule } from '@angular-architects/native-federation';
import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';

export const routes: Routes = [
  { path: '', component: HomeComponent, pathMatch: 'full' },
  {
    path: 'products',
    loadComponent: () =>
        loadRemoteModule('products', './Component').then((m) => m.AppComponent),
  },
  {
      path: '**',
      component: HomeComponent,
  }
];

O Angular não possui uma API que nos permita carregar módulos remotos. É aí que @angular-architects/native-federationentra em cena o pacote que instalamos anteriormente.

Este pacote permite o carregamento lento de um componente usando esse loadRemoteModulerecurso. Podemos usar o carregamento lento de um componente independente utilizando a loadComponentfunção da API do Angular.

Executando o Shell e o MFE1 (Produtos)

Finalmente, vamos executar nossa aplicação localmente para ver o MFE em ação:

ng serve shell
ng serve products

Precisamos abrir dois terminais e executar cada ng servecomando. Em seguida, podemos abrir nosso aplicativo usando http://localhost:4200:

E se navegarmos até a /productsrota, deveremos ver nossos produtos MFE:

Resumo

Neste post, abordamos o processo de configuração de um espaço de trabalho Angular com microfrontends usando o Module Federation. Criamos uma aplicação shell e uma aplicação remota de Produtos, integramos o Angular Material para estilização e configuramos o Native Federation para arquitetura modular. Por fim, configuramos o roteamento e testamos ambas as aplicações em execução localmente. Essa configuração básica permite a criação de aplicações web modulares e escaláveis, utilizando os recursos do MFE do Angular.

Referências e mais informações:

• https://www.angulararchitects.io/en/blog/micro-frontends-with-modern-angular-part-1-standalone-and-esbuild/
• https://www.npmjs.com/package/@angular-architects/native-federation

Veja o código-fonte completo no GitHub .