リモートモジュールの読み込み
リモートのマイクロフロントエンドを動的に読み込みます
「リモートモジュールの読み込み」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。
実行時にリモートを読み込む
リモートがモジュールを公開し、ホストがそのURLを把握したら、ホストはloadRemoteModuleを使って必要なときに読み込めます。これはHTTP経由の動的インポートであり、リモートに関するものがホストのビルドにバンドルされることはありません。
loadRemoteModule API
loadRemoteModuleは、リモート名（マニフェストに記載）と公開キー（リモートのexposesに記載）を受け取ります。戻り値は、そのモジュールを解決するPromiseです。
import { loadRemoteModule } from '@angular-architects/native-federation';
const m = await loadRemoteModule('catalog', './Routes');リモートルートの遅延読み込み
最も分かりやすいパターンは、各リモートからルートファイルを公開し、ホストのルーターでloadChildrenを使って遅延読み込みする方法です。これにより、そのルートに移動したときだけリモートが読み込まれます。
export const routes: Routes = [
{
path: 'catalog',
loadChildren: () =>
loadRemoteModule('catalog', './Routes').then(m => m.CATALOG_ROUTES),
},
];単一コンポーネントの読み込み
個別のstandaloneコンポーネントを公開して読み込むこともできます。ルート領域全体ではなく、ウィジェットを埋め込む場合に便利です。
{
path: 'widget',
loadComponent: () =>
loadRemoteModule('dashboard', './Widget').then(m => m.WidgetComponent),
}リモート側での公開
ホストが読み込めるようにするには、リモートのexposesマップにエクスポートを記載する必要があります。このキーをホストがloadRemoteModuleに渡します。
// remote federation.config.js
exposes: {
'./Routes': './src/app/catalog.routes.ts',
'./Widget': './src/app/widget.component.ts',
}動的なマニフェスト解決
ホストは起動時にマニフェストを読み込むため、別のマニフェストファイルを配信するだけで、ホストを再ビルドせずに環境（開発、ステージング、本番）ごとにリモートURLを切り替えられます。
読み込み失敗への対応
リモートはネットワーク経由で読み込まれるため、オフラインやデプロイ中などに失敗する可能性があります。1つのリモートの障害でシェル全体がクラッシュしないよう、読み込みをエラーハンドリングで囲んでください。
loadRemoteModule('catalog', './Routes')
.then(m => m.CATALOG_ROUTES)
.catch(() => import('./fallback.routes').then(m => m.FALLBACK_ROUTES));境界を越えてデータを渡す
ホストとリモート間の通信には、直接インポートではなく、共有シングルトンサービスまたはルーターを使用します。共有認証サービス（シングルトン）を使うと、リモートはホストが設定した現在のユーザーを読み取れます。
バージョン管理と契約
公開キー（例：./Routes）とその形状が契約になります。エクスポートの形状を変更すると、それを読み込むホストが壊れる可能性があります。そのため、公開モジュールは公開APIと同じように扱い、慎重にバージョン管理してください。
プリロード戦略
アプリがアイドル状態になった後にリモートを先行して読み込むことで、初回読み込みを軽く保ちながら、後の画面遷移を瞬時にできます。これにより、起動速度と体感的な画面遷移速度のバランスを取れます。
エンドツーエンドのフロー
ランタイムでの処理経路を振り返りましょう。ホストがマニフェストを読み込み、ユーザーがフェデレーションされたルートへ移動すると、loadRemoteModule がリモートの remoteEntry.json を取得します。共有シングルトンは再利用され、リモートのルートやコンポーネントがホストシェル内でレンダリングされます。
理解度チェック
ホストはリモート機能をどのように遅延読み込みしますか？
振り返り
ホストは実行時に loadRemoteModule(name, key) を使ってリモートを読み込みます。通常は遅延読み込みするルートの loadChildren/loadComponent 内で使用します。リモート側ではキーを expose する必要があり、マニフェストによって環境ごとの URL が解決されます。読み込み失敗には適切に対処し、共有シングルトンを介して通信し、公開するモジュールをバージョン管理された契約として扱ってください。
よくある質問
「リモートモジュールの読み込み」レッスンは無料ですか？
はい。「リモートモジュールの読み込み」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。
「リモートモジュールの読み込み」で何を学びますか？
リモートのマイクロフロントエンドを動的に読み込みます ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Angular Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「リモートモジュールの読み込み」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAngular Academyレッスンでコードを書いて実行できますか？
はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- マイクロフロントエンドアーキテクチャ
- AngularのNative Federation
- 依存関係の共有
- リモートモジュールの読み込み