問題タブ [webpack-module-federation]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
angular - Angular MFE - WebPack5 - モジュール フェデレーション - イメージ パスの問題
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 の他のソリューションはありますか?