Блог

Мы создаем угловое приложение MFE с использованием модуля Federation WebPack 5 и столкнулись с проблемой с путем к источнику изображения. Когда мы запускаем МФЭ только изображение загружается( localhost:5000/assets/../angular.png ), но когда мы запускаем хост/раковина приложение, изображение не загружается на МТЭ с МКЭ работает в другой порт(5000) и Shell работает в другой порт(4200) и приложение пытается получить доступ к изображению из оболочки ОС папки( localhost:4200/assets/../angular.png ), когда мы запускаем оболочку приложения.

У нас есть два варианта на выбор:

1. Переместите эти изображения в общую папку за пределами MFE и обратитесь
2. установите путь к изображению динамически, используя базовый путь из файла конфигурации

Мы использовали приведенный ниже пример для моего тестирования, но в приведенном ниже примере файл angular.png доступен как в MFE1, так и в оболочке, но если мы удалим его из оболочки, он не будет работать при загрузке приложения оболочки.

Образец исходного справочного кода (спасибо @manfred steyer)

Есть ли какое-либо другое решение в MFE для решения этой проблемы?

Проблема в том, что изображения импортируются с использованием относительных путей. Поскольку микро-интерфейсы всегда загружаются внутри оболочки, эти пути будут ссылаться на ресурсы оболочки. Чтобы устранить проблему, вам нужно будет добавить полный URL-адрес к изображению, чтобы загрузить его с правильного микро-интерфейса.

Если вы хотите загрузить изображение в микро-интерфейс, оно должно выглядеть следующим образом:

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

Чтобы настроить базовый URL-адрес для производства или разработки, можно написать метод в службе, который можно внедрить в компоненты. Это может выглядеть примерно так:

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

Затем вы можете вызвать метод внутри своего HTML-шаблона:

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