AngularのNative Federation
Angularでモジュールフェデレーションを設定します
「AngularのNative Federation」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。
Native Federationを使う理由
従来のModule Federationはwebpackに依存していました。Angularのビルドシステムがesbuildへ移行したため、コミュニティはNative Federationを作成しました。これは、import mapsとES modulesというWeb標準に基づく、同じ考え方のビルドツール非依存の実装です。
パッケージ
Angular用のNative Federationは@angular-architects/native-federationに含まれています。Angular CLIのschematicで追加すると、設定とビルドプロセスが自動的に組み込まれます。
ng add @angular-architects/native-federationホストの初期化
シェルアプリでschematicを実行し、dynamic-hostを選択します。これによりfederation.config.jsが生成され、Angularの起動前にFederationを初期化するようブートストラップが更新されます。
ng g @angular-architects/native-federation:init --project shell --type dynamic-hostリモートの初期化
機能アプリでは、同じ初期化処理をremoteで実行します。これにより、リモートの一部をホストに公開するための設定が作成されます。
ng g @angular-architects/native-federation:init --project catalog --type remote --port 4201federation.config.js
この設定はFederationの中心です。リモートの名前、exposesで公開するもの、sharedで共有する依存関係を定義します。
// catalog/federation.config.js
module.exports = withNativeFederation({
name: 'catalog',
exposes: { './Routes': './src/app/catalog.routes.ts' },
shared: { ...shareAll({ singleton: true }) },
});ブートストラップの変更
Native Federationでは、import mapsを準備するため、ブートストラップの前に初期化する必要があります。schematicによってmain.tsが、bootstrap.tsを読み込む初期化ステップに分割されます。
// main.ts
import { initFederation } from '@angular-architects/native-federation';
initFederation()
.then(() => import('./bootstrap'))
.catch(err => console.error(err));ホストでのリモート一覧の定義
ホストは、リモート名とそのremoteEntry.jsonのURLを対応付けるマニフェストを保持します。これにより、実行時に各リモートを取得する場所が分かります。
// federation.manifest.json
{
"catalog": "http://localhost:4201/remoteEntry.json"
}マニフェストの読み込み
マニフェストのパスをinitFederationに渡します。ホストは起動時に一度マニフェストを読み込み、その後、一覧にある任意のリモートを必要に応じて読み込めるようになります。
initFederation('/assets/federation.manifest.json')
.then(() => import('./bootstrap'));標準ベースでwebpackに固定されない
Native FederationはネイティブES modulesとimport mapsを使用するため、esbuild、Vite、その他のバンドラーで動作します。この分離性が、現代のAngularで推奨される方式になった理由です。
リモートごとの開発サーバー
開発中は、各リモートが独自のポート（ng serve --port 4201）で動作します。ホストはマニフェストを通じてそれらのURLを参照するため、構成全体をローカルで実行できます。
Native Federationで得られるもの
要約すると、独立したビルド、共有シングルトン（Angularのインスタンスを1つだけ使用）、リモートの動的読み込み、特定のバンドラーへの非依存性です。次のレッスンでは、依存関係の共有とリモートモジュールの読み込みについて詳しく説明します。
確認問題
Angularでは、従来のModule FederationではなくNative Federationを使うのはなぜですか？
まとめ
Native Federation（@angular-architects/native-federation）は、import mapsを使用して、esbuildベースのAngularにModule Federationを導入します。schematicでホストとリモートを初期化し、federation.config.jsでexposesとsharedを設定し、ブートストラップ前にinitFederationを呼び出して、マニフェストにリモートを一覧表示します。
よくある質問
「AngularのNative Federation」レッスンは無料ですか？
はい。「AngularのNative Federation」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。
「AngularのNative Federation」で何を学びますか？
Angularでモジュールフェデレーションを設定します ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Angular Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「AngularのNative Federation」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAngular Academyレッスンでコードを書いて実行できますか？
はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- マイクロフロントエンドアーキテクチャ
- AngularのNative Federation
- 依存関係の共有
- リモートモジュールの読み込み