依存関係の共有
リモート間でAngularとライブラリを共有します
「依存関係の共有」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。
依存関係を共有する理由
ホストと3つのリモートがそれぞれAngularのコピーをバンドルすると、ブラウザーはAngularを4回ダウンロードします。さらに、複数のAngularインスタンスが存在することで依存性注入が壊れます。共有によって1つのコピーだけが一度読み込まれ、全体で再利用されます。
sharedセクション
federation.config.jsのsharedオブジェクトでは、ホストとリモート間で共有する依存関係を定義します。Native Federationは実行時にそれらの重複を排除します。
module.exports = withNativeFederation({
shared: {
...shareAll({ singleton: true, strictVersion: true }),
},
});shareAllヘルパー
shareAll()を使うと、package.jsonにあるすべての依存関係を1つの設定で共有できます。これは一般的な開始点であり、その後、特定のパッケージを上書きできます。
shared: {
...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
}singleton: Angularで重要な理由
singleton: trueを指定すると、アプリ全体でパッケージのインスタンスが必ず1つになります。Angular core、RxJS、routerはシングルトンにする必要があります。@angular/coreが2つあると、インジェクター ツリーが2つ存在し、実行時エラーが発生します。
バージョンのネゴシエーション
リモートが異なるバージョンを要求した場合、Federationは互換性のあるバージョンを選択します。strictVersion: trueを指定すると、互換性がない場合に暗黙的に不一致のバージョンを読み込まずエラーにするため、問題を早期に発見できます。
shared: {
'@angular/core': { singleton: true, strictVersion: true, requiredVersion: '^18.0.0' },
}独自ライブラリの共有
共有するデザインシステムや認証ライブラリも、状態（現在のユーザーなど）の一貫性を保つためにシングルトンにする必要があります。名前を指定して明示的に共有してください。
shared: {
'@myorg/design-system': { singleton: true, requiredVersion: 'auto' },
'@myorg/auth': { singleton: true },
}requiredVersion: auto
requiredVersion: 'auto'はpackage.jsonからバージョンを読み取るため、バージョンをハードコードする必要がありません。依存関係をアップグレードしても、設定との同期を保てます。
実行時に起こること
各ビルドは、共有パッケージに関するメタデータを生成します。読み込み時にFederationがホストとリモート間のバージョンを比較し、import mapを通じて共有モジュールを1つ提供するため、ブラウザーはそれを1回だけ取得します。
共有しない場合のコスト
Angularの共有を忘れるのは典型的なミスです。アプリは動作しているように見えても、Angularのコピーが2つ存在するため、「NG0203: inject() must be called from an injection context」のような分かりにくいエラーが発生します。シングルトンとして共有すれば、これを防げます。
バージョンを揃える
独立してデプロイすると、バージョンが次第にずれる可能性があります。ホストがAngular 18で、リモートがAngular 17を必要としている場合、安全に共有できないため、チームはフレームワークパッケージで共有する範囲に合意し、連携してアップグレードする必要があります。
共有パッケージを除外する
小さなユーティリティについて、リモートが独自の分離されたコピーを必要とする場合があります。その場合は共有対象から除外して非公開でバンドルできますが、独立性と引き換えにサイズが重複することを受け入れる必要があります。
shared: {
...shareAll({ singleton: true }),
}
// skip a package by removing it from the shared map / excluding it確認問題
どのパッケージをシングルトンにする必要がありますか？
まとめ
（多くの場合はshareAllを使って）shared依存関係を宣言し、ホストとリモートが1つのコピーを読み込むようにします。フレームワークと状態を持つライブラリ（@angular/core、router、RxJS、独自の認証ライブラリ）にはsingleton: trueを指定し、strictVersionとrequiredVersion: 'auto'でバージョンのずれを検出します。Angularの共有を忘れると、DIエラーが発生します。
よくある質問
「依存関係の共有」レッスンは無料ですか？
はい。「依存関係の共有」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。
「依存関係の共有」で何を学びますか？
リモート間でAngularとライブラリを共有します ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Angular Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「依存関係の共有」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAngular Academyレッスンでコードを書いて実行できますか？
はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。