Angular Academy · Pelajaran

Memuatkan Modul Jauh

Muatkan mikro frontend jauh secara dinamik.

Pelajaran 4 daripada 413 langkah

Memuatkan Modul Jauh ialah pelajaran Angular Academy percuma di CoddyKit. Ini ialah pelajaran 4 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.

Menarik Modul Jauh pada Masa Jalan

Setelah modul jauh mendedahkan modul dan hos mengetahui URLnya, hos memuatkannya apabila diperlukan dengan loadRemoteModule. Ini ialah import dinamik melalui HTTP: tiada apa-apa daripada modul jauh dihimpunkan ke dalam binaan hos.

API loadRemoteModule

loadRemoteModule menerima nama modul jauh (daripada manifes) dan kunci yang didedahkan (daripada exposes modul jauh). Ia mengembalikan janji yang mengandungi modul tersebut.

import { loadRemoteModule } from '@angular-architects/native-federation';

const m = await loadRemoteModule('catalog', './Routes');

Pemuatan Malas Laluan Modul Jauh

Pola yang paling kemas ialah mendedahkan fail laluan daripada setiap modul jauh dan memuatkannya secara malas dalam penghala hos dengan loadChildren, supaya modul jauh hanya dimuatkan apabila laluannya dilawati.

export const routes: Routes = [
  {
    path: 'catalog',
    loadChildren: () =>
      loadRemoteModule('catalog', './Routes').then(m => m.CATALOG_ROUTES),
  },
];

Memuatkan Satu Komponen

Anda juga boleh mendedahkan dan memuatkan komponen kendiri secara individu, yang berguna untuk membenamkan widget berbanding keseluruhan kawasan laluan.

{
  path: 'widget',
  loadComponent: () =>
    loadRemoteModule('dashboard', './Widget').then(m => m.WidgetComponent),
}

Mendedahkan pada Bahagian Modul Jauh

Supaya hos boleh memuatkannya, modul jauh mesti menyenaraikan eksport dalam peta exposes. Kunci tersebut ialah nilai yang dihantar oleh hos kepada loadRemoteModule.

// remote federation.config.js
exposes: {
  './Routes': './src/app/catalog.routes.ts',
  './Widget': './src/app/widget.component.ts',
}

Penyelesaian Manifes Dinamik

Oleh sebab hos membaca manifes semasa permulaan, anda boleh menukar URL modul jauh mengikut persekitaran (pembangunan, pementasan, produksi) tanpa membina semula hos, hanya dengan menghantar fail manifes yang berbeza.

Mengendalikan Kegagalan Pemuatan

Modul jauh dimuatkan melalui rangkaian dan boleh gagal (luar talian, penggunaan sedang dijalankan). Balut pemuatan dengan pengendalian ralat supaya satu modul jauh yang rosak tidak menyebabkan seluruh cangkerang ranap.

loadRemoteModule('catalog', './Routes')
  .then(m => m.CATALOG_ROUTES)
  .catch(() => import('./fallback.routes').then(m => m.FALLBACK_ROUTES));

Menghantar Data Merentasi Sempadan

Komunikasi antara hos dan modul jauh menggunakan perkhidmatan singleton yang dikongsi atau penghala, bukannya import terus. Perkhidmatan pengesahan dikongsi (singleton) membolehkan modul jauh membaca pengguna semasa yang ditetapkan oleh hos.

Pemberian Versi dan Kontrak

Kunci yang didedahkan (contohnya ./Routes) dan bentuknya membentuk satu kontrak. Mengubah bentuk eksport boleh mematahkan hos yang memuatkannya, jadi anggap modul yang didedahkan seperti API awam dan berikan versinya dengan teliti.

Strategi Pramuat

Anda boleh memuatkan awal modul jauh selepas aplikasi tidak sibuk supaya navigasi seterusnya berlaku serta-merta, sambil mengekalkan pemuatan awal yang ringan. Ini mengimbangi kelajuan permulaan dengan kelajuan navigasi yang dirasai pengguna.

Aliran Hujung ke Hujung

Untuk mengimbas kembali laluan masa jalan: hos membaca manifes, pengguna menavigasi ke laluan berfederasi, loadRemoteModule mengambil remoteEntry.json remot, singleton dikongsi digunakan semula, dan laluan/komponen remot dipaparkan dalam cangkerang hos.

Semakan Pantas

Bagaimanakah hos memuatkan ciri remot secara malas?

Jawab dalam pelajaran interaktif

Imbas Kembali

Hos memuatkan remot pada masa jalan dengan loadRemoteModule(name, key), biasanya di dalam loadChildren/loadComponent untuk laluan malas. Remot mesti expose kunci tersebut; manifes menyelesaikan URL mengikut persekitaran. Kendalikan kegagalan pemuatan dengan baik, berkomunikasi melalui singleton yang dikongsi, dan anggap modul yang didedahkan sebagai kontrak berversi.

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 “Memuatkan Modul Jauh” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Angular Academy, termasuk “Memuatkan Modul Jauh”, 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 “Memuatkan Modul Jauh”?

Muatkan mikro frontend jauh secara dinamik. 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 4 daripada 4.

Berapa lamakah pelajaran “Memuatkan Modul Jauh” 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