Angular Academy · Pelajaran

Federasi Native untuk Angular

Konfigurasikan federasi modul dalam Angular.

Federasi Native untuk Angular adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 2 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 Native Federation

Module Federation klasik bergantung pada webpack. Sistem build Angular beralih ke esbuild, sehingga komunitas membuat Native Federation: implementasi gagasan yang sama dan tidak bergantung pada alat build tertentu, yang dibangun di atas standar web (import map dan modul ES).

Paketnya

Native Federation untuk Angular tersedia di @angular-architects/native-federation. Tambahkan dengan skematik CLI Angular, yang menyiapkan konfigurasi dan proses build.

ng add @angular-architects/native-federation

Menginisialisasi Host

Jalankan skematik pada aplikasi shell dan pilih dynamic-host. Skematik ini menghasilkan federation.config.js dan memperbarui bootstrap untuk menginisialisasi federation sebelum Angular dimulai.

ng g @angular-architects/native-federation:init --project shell --type dynamic-host

Menginisialisasi Remote

Untuk aplikasi fitur, jalankan init yang sama dengan remote. Tindakan ini membuat konfigurasi yang mengekspos bagian-bagian remote kepada host.

ng g @angular-architects/native-federation:init --project catalog --type remote --port 4201

federation.config.js

Konfigurasi ini adalah inti federation: menamai remote, mencantumkan hal-hal yang exposes, dan menyatakan dependensi shared.

// catalog/federation.config.js
module.exports = withNativeFederation({
  name: 'catalog',
  exposes: { './Routes': './src/app/catalog.routes.ts' },
  shared: { ...shareAll({ singleton: true }) },
});

Perubahan Bootstrap

Native Federation memerlukan inisialisasi sebelum bootstrap agar import map siap digunakan. Skematik ini memisahkan main.ts menjadi langkah init yang memuat bootstrap.ts.

// main.ts
import { initFederation } from '@angular-architects/native-federation';
initFederation()
  .then(() => import('./bootstrap'))
  .catch(err => console.error(err));

Mencantumkan Remote di Host

Host menyimpan manifes yang memetakan nama remote ke URL remoteEntry.json-nya, sehingga host mengetahui lokasi untuk mengambil setiap remote saat runtime.

// federation.manifest.json
{
  "catalog": "http://localhost:4201/remoteEntry.json"
}

Memuat Manifes

Teruskan jalur manifes ke initFederation. Host membacanya sekali saat mulai, lalu dapat memuat remote mana pun yang tercantum sesuai kebutuhan.

initFederation('/assets/federation.manifest.json')
  .then(() => import('./bootstrap'));

Berbasis Standar, Bukan Terkunci pada webpack

Karena Native Federation menggunakan modul ES native dan import map, teknologi ini dapat digunakan dengan esbuild, Vite, atau bundler lainnya. Pemisahan ini membuatnya menjadi pendekatan yang direkomendasikan untuk Angular modern.

Server Pengembangan per Remote

Saat pengembangan, setiap remote berjalan pada portnya sendiri (ng serve --port 4201). Host mengarah ke URL tersebut melalui manifes, sehingga Anda dapat menjalankan seluruh komposisi secara lokal.

Yang Diberikan Native Federation

Singkatnya: build independen, singleton bersama (satu instans Angular), pemuatan remote secara dinamis, dan tidak bergantung pada bundler tertentu. Pelajaran berikutnya membahas pembagian dependensi dan pemuatan modul remote secara mendetail.

Pemeriksaan Singkat

Mengapa memilih Native Federation dibandingkan Module Federation klasik dalam Angular?

Ringkasan

Native Federation (@angular-architects/native-federation) menghadirkan module federation ke Angular berbasis esbuild menggunakan import map. Inisialisasi host dan remote dengan skematik, konfigurasikan exposes dan shared di federation.config.js, panggil initFederation sebelum bootstrap, dan cantumkan remote dalam manifes.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Federasi Native untuk Angular” gratis?

Ya — teks lengkap “Federasi Native untuk Angular” 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 “Federasi Native untuk Angular”?

Konfigurasikan federasi modul dalam Angular. 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 2 dari 4.

Berapa lama pelajaran “Federasi Native untuk Angular” 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