はじめに:-
MicroFrontEnd アーキテクチャは初めてで、これに単一スパ フレームワークを選択しました。Angular 10 を使用してフロントエンド アプリケーションを構築しています。

問題:-
すべてのマイクロ フロント エンド アプリケーションを構築し、IIS Windows サーバーに展開した後 (手動展開のみ)、ルート情報 ( http://10.XX.XXXX.X/Accounts ) を手動で入力すると、アプリケーションが機能しません。 、http://10.XX.XXXX.X/Cards、http://10.XX.XXXX.X/Loansなど）。ただし、アプリケーション内のメニューからアクセスすると、問題なく同じものにアクセスできます (下の図を参照してください。赤いボックスの番号 [1 から 7] をクリックしても問題はありません)。

明確化

1. すべてのマイクロ フロント エンドとコンテナー ルート アプリケーションを同じポートでホストすることは可能ですか?
2. ユーザーがコンテナー アプリケーションのハイパーリンクをクリックしても、ブラウザーから入力/更新しないと、すべてのマイクロ フロント エンド アプリケーションが正常に動作するのはなぜですか?

Angular 11 アプリケーション (シングル SPA マイクロ フロントエンド) を Angular 12 に更新しようとすると、次の問題に直面します。

このアプリを実行しようとすると、コンソールにエラーが表示されます:

• configuration.output に不明なプロパティ 'chunkLoadingGlobal' があります。これらのプロパティは有効です: object {auxiliaryComment?、chunkCallbackName?、chunkFilename?、chunkLoadTimeout?、crossOriginLoading?、devtoolFallbackModuleFilenameTemplate?、devtoolLineToLine?、devtoolModuleFilenameTemplate?、devtoolNamespace?、filename?、futureEmitAssetss?、globalObject?、hashDigest?、hashDigestLength?、hashFunction ?, hashSalt?, hotUpdateChunkFilename?, hotUpdateFunction?, hotUpdateMainFilename?, jsonpFunction?, jsonpScriptType?, library?, libraryExport?, libraryTarget?, path?, pathinfo?, publicPath?, sourceMapFilename?, sourcePrefix?, strictModuleExceptionHandling?, umdNamedDefine?, webassemblyModuleFilename? }-> コンパイルの出力に影響するオプション。outputoptions は、コンパイルされたファイルをディスクに書き込む方法を webpack に指示します。詳細については、「C:\Users\newUser\AppData\Local\Temp\ng-UOeNLu\angular-errors.log」を参照してください。

パッケージ.json:

Angular.json:

単一スパのルート構成アプリと、角度で実装された他の 2 つの子アプリを ( parcelsを使用して) セットアップしました。そして、ルートアプリから子アプリのルートに移動しようとしていますが、最初のルート/app1では機能しますが、そこから移動したい場合、/app1/searchまたは/app1/details関連付けられたコンポーネントをロードしない場合は、URL が変更されます。

最初にヒット/app1/searchすると検索コンポーネントが読み込まれますが、その後、他のルートに移動しようとすると/app1/<any-route>、URL が変更されますが、コンポーネントは読み込まれません。

ルート構成 app.component.html

App1 ルート モジュール: