Angular Academy · Lekcja

Native Federation dla Angulara

Konfigurować module federation w Angularze

Lekcja 2 z 413 kroki

Native Federation dla Angulara to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Angular Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Angular Academy zawiera 4 lekcji w sumie.

Dlaczego Native Federation

Klasyczny Module Federation był powiązany z webpackiem. System budowania Angulara przeszedł na esbuild, dlatego społeczność stworzyła Native Federation: implementację tej samej idei niezależną od narzędzia budowania i opartą na standardach internetowych (mapach importu oraz modułach ES).

Pakiet

Native Federation dla Angulara znajduje się w pakiecie @angular-architects/native-federation. Należy dodać go za pomocą schematu Angular CLI, który konfiguruje ustawienia i proces budowania.

ng add @angular-architects/native-federation

Inicjalizowanie hosta

Uruchom schemat dla aplikacji powłoki i wybierz dynamic-host. Wygeneruje on plik federation.config.js oraz zmodyfikuje proces bootstrapowania, aby zainicjalizować federację przed uruchomieniem Angulara.

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

Inicjalizowanie remote'a

W przypadku aplikacji funkcjonalnej uruchom tę samą inicjalizację z opcją remote. Spowoduje to utworzenie konfiguracji udostępniającej hostom części remote'a.

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

Plik federation.config.js

Ta konfiguracja jest sercem federacji: określa nazwę remote'a, wymienia elementy, które on exposes, oraz deklaruje współdzielone zależności w shared.

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

Zmiany w bootstrapowaniu

Native Federation wymaga inicjalizacji przed bootstrapowaniem, aby mapy importu były gotowe. Schemat dzieli plik main.ts na krok inicjalizacji, który ładuje plik bootstrap.ts.

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

Lista remote'ów w hoście

Host przechowuje manifest mapujący nazwy remote'ów na adresy URL ich plików remoteEntry.json, dzięki czemu wie, skąd pobrać każdy remote w czasie działania.

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

Ładowanie manifestu

Przekaż ścieżkę manifestu do initFederation. Host odczyta go raz podczas uruchamiania, a następnie będzie mógł ładować dowolne wymienione remote'y na żądanie.

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

Oparte na standardach, bez uzależnienia od webpacka

Ponieważ Native Federation korzysta z natywnych modułów ES i map importu, działa z esbuild, Vite oraz innymi bundlerami. To rozdzielenie jest powodem, dla którego Native Federation stało się zalecanym podejściem dla nowoczesnego Angulara.

Osobne serwery deweloperskie dla remote'ów

Podczas tworzenia każda zdalna aplikacja działa na własnym porcie (ng serve --port 4201). Host korzysta z tych adresów URL wskazanych w manifeście, dzięki czemu można lokalnie uruchomić całą kompozycję.

Co zapewnia Native Federation

W skrócie: niezależne kompilacje, współdzielone singletony (jedna instancja Angulara), dynamiczne ładowanie remote'ów oraz brak uzależnienia od konkretnego bundlera. W kolejnych lekcjach szczegółowo omówimy współdzielenie zależności i ładowanie modułów zdalnych.

Szybkie sprawdzenie

Dlaczego w Angularze warto wybrać Native Federation zamiast klasycznego Module Federation?

Odpowiedz w interaktywnej lekcji

Podsumowanie

Native Federation (@angular-architects/native-federation) wprowadza module federation do Angulara opartego na esbuild, wykorzystując mapy importu. Inicjalizuj hosty i remote'y za pomocą schematu, konfiguruj exposes oraz shared w pliku federation.config.js, wywołuj initFederation przed bootstrapowaniem i umieszczaj remote'y w manifeście.

Bezpłatny start

Ucz się HTML dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy: 38
Lekcje: 144

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Native Federation dla Angulara” jest bezpłatna?

Tak — pełny tekst „Native Federation dla Angulara” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Angular Academy, przejdź na CoddyKit PRO. Kurs Angular Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Native Federation dla Angulara”?

Konfigurować module federation w Angularze Ćwiczysz Angular Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Angular Academy?

Nie wymagamy żadnego doświadczenia. Angular Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „Native Federation dla Angulara”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Angular Academy?

Tak. Każda lekcja Angular Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Angular Academy