Module Federation WebPack 5 を使用して MFE Angular アプリを作成していますが、イメージ ソース パスで問題が発生しました。MFE を単独で実行すると、イメージはロードされますが ( localhost:5000/assets/../angular.png)、ホスト/シェル アプリを実行すると、MFE が別のポート (5000) で実行され、シェルが別のポートで実行されているため、イメージは MFE 用にロードされません ( 4200) であり、シェル アプリを実行すると、アプリはシェルのアセット フォルダー ( ) から画像にアクセスしようとしますlocalhost:4200/assets/../angular.png。
2 つのオプションがあります。
- それらの画像を MFE 外の共通フォルダに移動して参照する
- 構成ファイルの basepath を使用して動的にイメージ パスを設定する
テストには以下のサンプルを使用しましたが、以下のサンプルでは、Angular.png ファイルは MFE1 とシェルの両方で使用できますが、シェルから削除すると、シェル アプリを読み込んだときに機能しません。
ソース参照コードのサンプル(@manfredsteyer に感謝)
これを解決するための MFE の他のソリューションはありますか?