Berbagi Dependensi
Bagikan Angular dan pustaka di antara aplikasi jarak jauh.
Berbagi Dependensi adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Angular Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Angular Academy mencakup 4 pelajaran total.
Mengapa Berbagi Dependensi
Jika host dan tiga remote masing-masing membundel salinan Angular sendiri, peramban mengunduh Angular empat kali dan, yang lebih buruk, memiliki beberapa instans Angular yang merusak injeksi dependensi. Berbagi memastikan satu salinan dimuat sekali dan digunakan kembali oleh semua pihak.
Bagian shared
Di federation.config.js, objek shared menyatakan dependensi mana yang dibagikan antara host dan remote. Native Federation menghapus duplikatnya saat runtime.
module.exports = withNativeFederation({
shared: {
...shareAll({ singleton: true, strictVersion: true }),
},
});Pembantu shareAll
shareAll() membagikan setiap dependensi dalam package.json dengan satu konfigurasi, sebagai titik awal yang umum. Setelah itu, Anda dapat mengganti pengaturan paket tertentu.
shared: {
...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
}singleton: Mengapa Penting untuk Angular
singleton: true memaksa hanya ada satu instans paket di seluruh aplikasi. Angular core, RxJS, dan router MUST berupa singleton; dua salinan @angular/core berarti dua pohon injektor dan error saat runtime.
Negosiasi Versi
Ketika remote meminta versi yang berbeda, federation memilih versi yang kompatibel. strictVersion: true menghasilkan error jika tidak kompatibel, bukan memuat versi yang tidak cocok secara diam-diam, sehingga masalah dapat diketahui lebih awal.
shared: {
'@angular/core': { singleton: true, strictVersion: true, requiredVersion: '^18.0.0' },
}Berbagi Pustaka Milik Anda
Pustaka sistem desain atau autentikasi yang dibagikan juga sebaiknya berupa singleton agar status (seperti pengguna saat ini) tetap konsisten. Bagikan pustaka tersebut secara eksplisit berdasarkan namanya.
shared: {
'@myorg/design-system': { singleton: true, requiredVersion: 'auto' },
'@myorg/auth': { singleton: true },
}requiredVersion: auto
requiredVersion: 'auto' membaca versi dari package.json, sehingga Anda tidak perlu menuliskannya secara tetap. Dengan demikian, konfigurasi tetap selaras saat dependensi diperbarui.
Yang Terjadi Saat Runtime
Setiap build menghasilkan metadata tentang paket yang dibagikan. Saat pemuatan, federation membandingkan versi di seluruh host dan remote, lalu menyajikan satu modul bersama melalui import map, sehingga peramban mengambilnya hanya sekali.
Dampak Tidak Berbagi
Lupa membagikan Angular adalah kesalahan klasik: aplikasi tampak berfungsi, lalu menghasilkan error yang sulit dipahami seperti "NG0203: inject() must be called from an injection context" karena ada dua salinan Angular. Menjadikannya singleton saat berbagi mencegah masalah ini.
Menjaga Keselarasan Versi
Penerapan independen dapat membuat versi tidak selaras. Tim sebaiknya menyepakati rentang versi bersama untuk paket framework dan memperbaruinya secara terkoordinasi, karena host dengan Angular 18 tidak dapat berbagi dengan aman bersama remote yang memerlukan Angular 17.
Melewati Paket yang Dibagikan
Terkadang remote memerlukan salinan terisolasi miliknya sendiri untuk utilitas kecil. Anda dapat mengecualikannya dari pembagian agar dibundel secara privat, dengan menerima ukuran duplikat sebagai imbalan atas independensi.
shared: {
...shareAll({ singleton: true }),
}
// skip a package by removing it from the shared map / excluding itPemeriksaan Singkat
Paket mana yang harus berupa singleton?
Ringkasan
Deklarasikan dependensi shared (sering kali melalui shareAll) agar host dan remote memuat satu salinan. Jadikan framework dan pustaka yang menyimpan status (@angular/core, router, RxJS, pustaka autentikasi Anda) sebagai singleton: true; gunakan strictVersion dan requiredVersion: 'auto' untuk mendeteksi ketidakselarasan. Lupa membagikan Angular menyebabkan error DI.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Berbagi Dependensi” gratis?
Ya — teks lengkap “Berbagi Dependensi” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Angular Academy, upgrade ke CoddyKit PRO. Kursus Angular Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Berbagi Dependensi”?
Bagikan Angular dan pustaka di antara aplikasi jarak jauh. Kamu berlatih Angular Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Angular Academy?
Tidak diperlukan pengalaman sebelumnya. Angular Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.
Berapa lama pelajaran “Berbagi Dependensi” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Angular Academy ini?
Ya. Setiap pelajaran Angular Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.