Angular Academy · Pelajaran

Memuat Modul Jarak Jauh

Muat mikro frontend jarak jauh secara dinamis.

Memuat Modul Jarak Jauh adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 4 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.

Mengambil Remote Saat Runtime

Setelah remote mengekspos modul dan host mengetahui URL-nya, host memuatnya sesuai kebutuhan dengan loadRemoteModule. Ini adalah import dinamis melalui HTTP: tidak ada bagian remote yang dibundel ke dalam build host.

API loadRemoteModule

loadRemoteModule menerima nama remote (dari manifes) dan kunci yang diekspos (dari exposes milik remote). Fungsi ini mengembalikan promise yang berisi modul tersebut.

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

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

Pemuatan Malas Rute Remote

Pola yang paling bersih adalah mengekspos file routes dari setiap remote dan memuatnya secara malas di router host dengan loadChildren, sehingga remote hanya dimuat saat rutenya dikunjungi.

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

Memuat Satu Komponen

Anda juga dapat mengekspos dan memuat satu komponen mandiri, yang berguna untuk menyematkan widget, bukan seluruh area rute.

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

Mengekspos dari Sisi Remote

Agar host dapat memuatnya, remote harus mencantumkan ekspor tersebut dalam peta exposes. Kunci ini adalah nilai yang diteruskan host ke loadRemoteModule.

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

Resolusi Manifes Dinamis

Karena host membaca manifes saat mulai, Anda dapat mengganti URL remote untuk setiap lingkungan (pengembangan, staging, produksi) tanpa membangun ulang host, cukup dengan menyediakan file manifes yang berbeda.

Menangani Kegagalan Pemuatan

Remote dimuat melalui jaringan dan dapat gagal (luring, penerapan sedang berlangsung). Bungkus pemuatan dengan penanganan error agar satu remote yang bermasalah tidak menyebabkan seluruh shell berhenti.

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

Meneruskan Data Melintasi Batas

Komunikasi antara host dan remote menggunakan layanan singleton bersama atau router, bukan import langsung. Layanan autentikasi bersama (singleton) memungkinkan remote membaca pengguna saat ini yang ditetapkan host.

Pemberian Versi dan Kontrak

Kunci yang diekspos (misalnya ./Routes) beserta bentuknya membentuk sebuah kontrak. Mengubah bentuk ekspor dapat merusak host yang memuatnya, jadi perlakukan modul yang diekspos seperti API publik dan berikan versinya dengan cermat.

Strategi Pemuatan Awal

Anda dapat memuat awal remote setelah aplikasi tidak sibuk agar navigasi berikutnya berlangsung seketika, sekaligus menjaga pemuatan awal tetap ringan. Ini menyeimbangkan kecepatan mulai dengan kecepatan navigasi yang dirasakan pengguna.

Alur Menyeluruh

Sebagai rangkuman jalur saat runtime: host membaca manifes, pengguna berpindah ke rute federasi, loadRemoteModule mengambil remoteEntry.json milik remote, singleton bersama digunakan kembali, lalu rute/komponen remote ditampilkan di dalam shell host.

Pemeriksaan Singkat

Bagaimana host memuat fitur remote secara malas?

Rangkuman

Host memuat remote saat runtime dengan loadRemoteModule(name, key), biasanya di dalam loadChildren/loadComponent untuk rute malas. Remote harus expose kuncinya; manifes menentukan URL berdasarkan lingkungan. Tangani kegagalan pemuatan dengan baik, lakukan komunikasi melalui singleton bersama, dan perlakukan modul yang diekspos sebagai kontrak berversi.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Memuat Modul Jarak Jauh” gratis?

Ya — teks lengkap “Memuat Modul Jarak Jauh” 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 “Memuat Modul Jarak Jauh”?

Muat mikro frontend jarak jauh secara dinamis. 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 4 dari 4.

Berapa lama pelajaran “Memuat Modul Jarak Jauh” 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.

Semua pelajaran dalam kursus ini

← Kembali ke Angular Academy