Angular MFE - WebPack5 - Module Federation - Image Path Issue

Question

We are creating an MFE angular app using Module Federation WebPack 5 and ended up in an issue with the image source path. When we run the MFE alone, the image is loading(localhost:5000/assets/../angular.png) but when we run the host/shell app, the image is not loading for MFE since MFE is running in a different port(5000) and Shell is running in a different port(4200) and the app is trying to access the image from Shell's asset folder(localhost:4200/assets/../angular.png) when we run the shell app.

We have two options in hand:

1. Move those images to a common folder, outside the MFE and refer
2. set the image path dynamically using the basepath from a configuration file

We have used the below sample for my testing but in the below sample the angular.png file is available in both MFE1 and Shell but if we remove it from Shell, it won't work when we load the shell app.

Source Reference Code Sample (thanks to @manfredsteyer)

Any other solution in MFE to resolve this?

Answer 1

The problem is that the images are imported using relative paths. Because the micro frontends are always loaded inside the shell, these paths will reference the shell's assets. To fix the issue you would need to add the complete URL to the image to load it from the correct micro frontend.

If you want to load an image in the micro frontend it should look like this:

<img src="http://localhost:5000/assets/image.png" />

To adjust the base url for production or development, you could write a method in a service that you can inject into your componentes. It could look something like this:

public getImageBaseUrl(): string {
  if (environment.production) {
    return "http://someurl.com/assets/";
  } else {
    return "http://localhost:5000/assets/";
  }
}

Then you can call the method inside your HTML-template:

<img [src]="getImageBaseUrl() + 'image.png'" />