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.
Porem quando acesso a aplicação rodando recebo um erro 404 ao buscar o caminho da imagem
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.
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;
}
}
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.
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.
Top comments (0)