問題タブ [webpack-module-federation]

既存の大規模な実世界のアプリに Webpack-5 モジュール フェデレーションを実装しようとしています。angular-plugin-architecture-with-module-federation のようなプラグインのデモを試みています。上記のリンクされたサンプル アプリケーションでアプリとプラグイン間の通信をシミュレートするために、SharedService を shared-library に追加しました。インスタンスは 1 つしかなく、この例ではすべてが問題なく動作します。

ただし、既存のアプリでは、サービスのインスタンスが 2 つあるため、これは機能しません。最初のインスタンスはアプリで作成され、プラグインが読み込まれると 2 番目のインスタンスが作成されます。コンストラクターでコンソールに書き込むことでこれを確認すると、2行あります。さらに、これはソースにブレークポイントを追加することで確認できます。プラグインがロードされた後、ブラウザの開発者ツール -> ソースに shared.service.ts の 2 つのソース ファイルがあります。

アプリは、上記のスクリーン キャプチャの最初のソース ファイルを使用します。プラグインは dist のファイルを使用します。両方がライブラリの同じインスタンスを使用するため、同じサービスを使用するように構成する方法は? 以下に、さらに詳しい情報を示します。

プロジェクト/プラグイン/webpack.config.js

src/webpack.config.js

ワークスペースは、ワークスペースの例のようになります。

別の問題のため、package.json を projects/plugins にコピーする必要があったことを除いて。私はこれに完全に行き詰まっており、成功せずに機能させるためにあらゆることを試みています。