Angular マイクロフロントエンド
Module federation、マイクロフロントエンドアーキテクチャ、共有依存関係、デプロイ戦略、通信パターン
1Angularのコンテキストにおけるマイクロフロントエンドアーキテクチャとは何ですか？
Angularのコンテキストにおけるマイクロフロントエンドアーキテクチャとは何ですか？
回答
マイクロフロントエンドアーキテクチャは、モノリシックなAngularアプリケーションをより小さく独立したアプリケーションに分割し、それぞれを個別に開発・デプロイします。各マイクロフロントエンドは独自のrepository、CI/CDパイプライン、専任チームを持つことができます。Webpack 5のModule Federationは、Angularでこのアーキテクチャを実装するための推奨技術であり、他のアプリケーションからのコードをruntimeで動的にロードできます。
2AngularマイクロフロントエンドアーキテクチャにおけるModule Federationの役割は何ですか？
AngularマイクロフロントエンドアーキテクチャにおけるModule Federationの役割は何ですか？
回答
Module Federationは、rebuildなしでruntimeにAngularアプリケーション間でコードを共有することを可能にします。各マイクロフロントエンドは、他のアプリケーション（host）によって消費されるモジュール（remote）を公開します。これによりコードの重複を回避し、bundleサイズを削減し、独立したデプロイが可能になります。Module Federationは、非同期ロード、依存関係の解決、Angular coreなどの共通ライブラリの共有を自動的に処理します。
3Module Federationにおけるhostアプリケーションとremoteアプリケーションの違いは何ですか？
Module Federationにおけるhostアプリケーションとremoteアプリケーションの違いは何ですか？
回答
hostアプリケーションは、remoteによって公開されたモジュールを消費します。webpack.configでremoteを設定し、それらのモジュールを動的にロードします。remoteアプリケーションは、他のアプリケーションによって消費されるモジュール（component、service）を公開します。同じアプリケーションがhostとremoteの両方になることができます。hostはアプリケーションのshell（header、navigation、layout）を制御し、remoteはビジネス機能を提供します。
@angular-architects/module-federationを使用してAngularプロジェクトでModule Federationを設定する方法は？
Module Federationでshared scopeを設定することが重要なのはなぜですか？
+17 面接問題