DEV Community

Hernani Almeida
Hernani Almeida

Posted on

1

Solucionar erro imagem module-federation

Este artigo visa corrigir o erro que temos quando utilizamos module-federation para configurar aplicações micro-frontends com angular
Resumindo o erro ocorre pois quando rodamos as aplicações e o angular vai buscar o path da imagem, automaticamente, ele assume o path do host como base e, caso a imagem não esteja alocada no host, não encontra o caminho da imagem.
Isso pode interferir nas vantagens de uso do microfrontend que seriam:

  • Independência Total: Cada equipe poder trabalhar em um microfrontend de forma autônoma, pois no caso de imagens teriam que estar adicionando a imagem na aplicação host.
  • Deploy Independente: Cada microfrontend poder ser deployado de forma independente, pois sempre haverá a dependência de deploy da app host em caso de mudar ou adicionar imagens. Veja este exemplo, tenho na aplicação MFE a imagem e o path da imagem passado de maneira correta.

Image description
Porem quando acesso a aplicação rodando recebo um erro 404 ao buscar o caminho da imagem

Image description
Note na imagem que a aplicação utilizou o base path da aplicação host para buscar a imagem http://localhost:4200/, onde não temos a imagem alocada, por isso recebemos o erro.

Image description

Bora lá resolver isso então, vamos criar um pipe UrlFormatterPipe na aplicação mfe para forçarmos o angular utilizar o path correto ao buscar a imagem.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'urlFormatter'
})
export class UrlFormatterPipe implements PipeTransform {

  transform(value: string): string {
    return __webpack_public_path__ + value;
  }

}
Enter fullscreen mode Exit fullscreen mode

Resumindo o que estamos fazendo no pipe e buscar o path publico da aplicação mfe através da variável global webpack_public_path (ou seja mesmo em ambiente produtivo ira nos retornar o base path da aplicação mfe rodando) e concatenamos com o path da imagem que recebemos dentro do parametro value.
Vamos utilizar o pipe no path da imagem agora e ver o resultado.

Image description

Image description

Voalá imagem apareceu com sucesso e podemos confirmar no devTools que o base path esta vindo da aplicação mfe

E isso ai devs mas um conhecimento passado, deixarei aqui link do artigo que mostro como configurar um micro frontend angular utilizando module federation, aplicação utilizada para explicar a correção do path da imagem, e link do repositório 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.

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more