Angular Academy · Pelajaran

Berkongsi Kebergantungan

Kongsi Angular dan pustaka merentas aplikasi jauh.

Pelajaran 3 daripada 413 langkah

Berkongsi Kebergantungan ialah pelajaran Angular Academy percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Angular Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Angular Academy merangkumi sejumlah 4 pelajaran.

Mengapa Berkongsi Kebergantungan

Jika hos dan tiga modul jauh masing-masing menghimpunkan salinan Angular sendiri, pelayar memuat turun Angular sebanyak empat kali dan, lebih teruk lagi, berakhir dengan beberapa tika Angular yang merosakkan suntikan kebergantungan. Perkongsian memastikan satu salinan sahaja dimuatkan sekali dan digunakan semula oleh semua pihak.

Bahagian shared

Dalam federation.config.js, objek shared mengisytiharkan kebergantungan yang dikongsi antara hos dan modul jauh. Native Federation menghapuskan pendua kebergantungan tersebut pada masa jalan.

module.exports = withNativeFederation({
  shared: {
    ...shareAll({ singleton: true, strictVersion: true }),
  },
});

Pembantu shareAll

shareAll() berkongsi setiap kebergantungan dalam package.json dengan satu konfigurasi, iaitu titik permulaan yang biasa. Anda kemudian boleh mengatasi pakej tertentu.

shared: {
  ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
}

singleton: Mengapa Penting untuk Angular

singleton: true memaksa tepat satu tika pakej merentasi seluruh aplikasi. Teras Angular, RxJS dan penghala MUST menjadi singleton; dua salinan @angular/core bermaksud dua pepohon penyuntik dan ralat pada masa jalan.

Perundingan Versi

Apabila modul jauh meminta versi yang berbeza, federation memilih versi yang serasi. strictVersion: true menghasilkan ralat apabila tidak serasi, bukannya memuatkan versi yang tidak sepadan secara senyap, lalu mendedahkan masalah lebih awal.

shared: {
  '@angular/core': { singleton: true, strictVersion: true, requiredVersion: '^18.0.0' },
}

Berkongsi Pustaka Anda Sendiri

Pustaka sistem reka bentuk atau pengesahan yang dikongsi juga hendaklah menjadi singleton supaya keadaan (seperti pengguna semasa) kekal konsisten. Kongsikannya secara eksplisit mengikut nama.

shared: {
  '@myorg/design-system': { singleton: true, requiredVersion: 'auto' },
  '@myorg/auth': { singleton: true },
}

requiredVersion: auto

requiredVersion: 'auto' membaca versi daripada package.json supaya anda tidak perlu menetapkannya secara keras. Ini memastikan konfigurasi kekal selaras apabila anda menaik taraf kebergantungan.

Perkara yang Berlaku pada Masa Jalan

Setiap binaan menghasilkan metadata tentang pakej kongsinya. Semasa pemuatan, federation membandingkan versi antara hos dan modul jauh lalu menyajikan satu modul dikongsi melalui peta import, supaya pelayar mengambilnya sekali sahaja.

Kos Tidak Berkongsi

Terlupa berkongsi Angular ialah kesilapan klasik: aplikasi kelihatan berfungsi, kemudian menghasilkan ralat yang sukar difahami seperti "NG0203: inject() mesti dipanggil daripada konteks suntikan" kerana terdapat dua salinan Angular. Menjadikannya singleton yang dikongsi menghalang perkara ini.

Menyelaraskan Versi

Penggunaan secara berasingan boleh menyebabkan versi tersasar. Pasukan hendaklah bersetuju pada julat yang dikongsi untuk pakej rangka kerja dan menaik tarafnya secara selaras, kerana hos pada Angular 18 tidak boleh berkongsi dengan selamat dengan modul jauh yang memerlukan Angular 17.

Melangkau Pakej Dikongsi

Sesekali, modul jauh memerlukan salinan terasingnya sendiri bagi utiliti kecil. Anda boleh mengecualikannya daripada perkongsian supaya ia dihimpunkan secara peribadi, dengan menerima saiz pendua sebagai pertukaran untuk kebebasan.

shared: {
  ...shareAll({ singleton: true }),
}
// skip a package by removing it from the shared map / excluding it

Semakan Pantas

Pakej manakah yang mesti menjadi singleton?

Jawab dalam pelajaran interaktif

Imbas Kembali

Isytiharkan kebergantungan shared (selalunya melalui shareAll) supaya hos dan modul jauh memuatkan satu salinan. Jadikan rangka kerja dan pustaka berkeadaan (@angular/core, penghala, RxJS, pustaka pengesahan anda) singleton: true; gunakan strictVersion dan requiredVersion: 'auto' untuk mengesan versi yang tersasar. Terlupa berkongsi Angular menyebabkan ralat DI.

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 38
Pelajaran: 144

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Berkongsi Kebergantungan” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Angular Academy, termasuk “Berkongsi Kebergantungan”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Angular Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Berkongsi Kebergantungan”?

Kongsi Angular dan pustaka merentas aplikasi jauh. Anda berlatih Angular Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Angular Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Angular Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.

Berapa lamakah pelajaran “Berkongsi Kebergantungan” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Angular Academy ini?

Ya. Setiap pelajaran Angular Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Angular Academy