Estamos creando una aplicación angular MFE usando Module Federation WebPack 5 y terminamos con un problema con la ruta de origen de la imagen. Cuando ejecutamos MFE solo, la imagen se carga ( localhost:5000/assets/../angular.png ), pero cuando ejecutamos la aplicación host/shell, la imagen no se carga para MFE ya que MFE se ejecuta en un puerto diferente. (5000) y Shell se ejecuta en un puerto diferente (4200) y la aplicación intenta acceder a la imagen desde la carpeta de activos de Shell ( localhost:4200/assets/../angular.png ) cuando ejecutamos la aplicación de shell.
Tenemos dos opciones en la mano:
Hemos usado el ejemplo a continuación para mis pruebas, pero en el ejemplo a continuación, el archivo angular.png está disponible tanto en MFE1 como en Shell, pero si lo eliminamos de Shell, no funcionará cuando carguemos la aplicación de shell.
Ejemplo de código de referencia fuente (gracias a @manfredsteyer)
¿Alguna otra solución en MFE para resolver esto?
El problema es que las imágenes se importan utilizando rutas relativas. Debido a que las micro interfaces siempre se cargan dentro del shell, estas rutas harán referencia a los recursos del shell. Para solucionar el problema, deberá agregar la URL completa a la imagen para cargarla desde la micro interfaz correcta.
Si desea cargar una imagen en la micro interfaz, debería verse así:
<img src="http://localhost:5000/assets/image.png" />Para ajustar la url base para producción o desarrollo, puede escribir un método en un servicio que puede inyectar en sus componentes. Podría verse algo como esto:
public getImageBaseUrl(): string { if (environment.production) { return "http://someurl.com/assets/"; } else { return "http://localhost:5000/assets/"; } }Luego puede llamar al método dentro de su plantilla HTML:
<img [src]="getImageBaseUrl() + 'image.png'" />