Angular Academy · Pelajaran

Persekutuan Asli untuk Angular

Konfigurasikan persekutuan modul dalam Angular.

Pelajaran 2 daripada 413 langkah

Persekutuan Asli untuk Angular ialah pelajaran Angular Academy percuma di CoddyKit. Ini ialah pelajaran 2 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 Native Federation

Module Federation klasik terikat pada webpack. Sistem binaan Angular beralih kepada esbuild, lalu komuniti mencipta Native Federation: pelaksanaan idea yang sama dan tidak bergantung pada alat binaan tertentu, berasaskan piawaian web (peta import dan modul ES).

Pakejnya

Native Federation untuk Angular terdapat dalam @angular-architects/native-federation. Tambahkannya dengan skema CLI Angular, yang menyambungkan konfigurasi dan proses binaan.

ng add @angular-architects/native-federation

Memulakan Hos

Jalankan skema pada aplikasi cangkerang dan pilih dynamic-host. Skema ini menjana federation.config.js dan mengemas kini proses bootstrap untuk memulakan federation sebelum Angular bermula.

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

Memulakan Modul Jauh

Untuk aplikasi ciri, jalankan init yang sama dengan remote. Tindakan ini mencipta konfigurasi yang mendedahkan bahagian modul jauh kepada hos.

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

federation.config.js

Konfigurasi ini ialah teras federation: ia menamakan modul jauh, menyenaraikan perkara yang didedahkannya melalui exposes, dan mengisytiharkan kebergantungan 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 pemulaan sebelum bootstrap supaya peta import tersedia. Skema ini memisahkan main.ts kepada langkah init yang memuatkan bootstrap.ts.

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

Menyenaraikan Modul Jauh dalam Hos

Hos menyimpan manifes yang memetakan nama modul jauh kepada URL remoteEntry.json masing-masing, supaya hos mengetahui lokasi untuk mengambil setiap modul jauh pada masa jalan.

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

Memuatkan Manifes

Hantar laluan manifes kepada initFederation. Hos membacanya sekali semasa permulaan, kemudian boleh memuatkan mana-mana modul jauh yang disenaraikan apabila diperlukan.

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

Berasaskan Piawaian, Bukan Terikat pada webpack

Oleh sebab Native Federation menggunakan modul ES natif dan peta import, ia berfungsi dengan esbuild, Vite atau pembundel lain. Pemisahan ini ialah sebab pendekatan tersebut menjadi pendekatan yang disyorkan untuk Angular moden.

Pelayan Pembangunan bagi Setiap Modul Jauh

Semasa pembangunan, setiap modul jauh berjalan pada portnya sendiri (ng serve --port 4201). Hos menunjuk kepada URL tersebut melalui manifes, jadi anda boleh menjalankan keseluruhan gabungan secara setempat.

Perkara yang Diberikan oleh Native Federation

Ringkasnya: binaan berasingan, singleton dikongsi (satu tika Angular), pemuatan modul jauh secara dinamik, dan tiada pergantungan pada pembundel tertentu. Pelajaran seterusnya menerangkan perkongsian kebergantungan dan pemuatan modul jauh dengan lebih terperinci.

Semakan Pantas

Mengapakah Native Federation dipilih berbanding Module Federation klasik dalam Angular?

Jawab dalam pelajaran interaktif

Imbas Kembali

Native Federation (@angular-architects/native-federation) membawa module federation kepada Angular berasaskan esbuild menggunakan peta import. Mulakan hos dan modul jauh dengan skema, konfigurasikan exposes dan shared dalam federation.config.js, panggil initFederation sebelum bootstrap, dan senaraikan modul jauh dalam manifes.

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 “Persekutuan Asli untuk Angular” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Angular Academy, termasuk “Persekutuan Asli untuk Angular”, 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 “Persekutuan Asli untuk Angular”?

Konfigurasikan persekutuan modul dalam Angular. 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 2 daripada 4.

Berapa lamakah pelajaran “Persekutuan Asli untuk Angular” 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