Angular Academy · Lekcja

Ładowanie zdalnych modułów

Dynamicznie ładować zdalne micro frontendy

Ładowanie zdalnych modułów to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 4 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.

Pobieranie remote'a w czasie działania

Gdy remote udostępnia moduł, a host zna jego adres URL, host ładuje go na żądanie za pomocą loadRemoteModule. Jest to dynamiczny import przez HTTP: remote nie jest w żaden sposób dołączany do bundla hosta podczas budowania.

API loadRemoteModule

loadRemoteModule przyjmuje nazwę remote'a (z manifestu) oraz klucz udostępnionego elementu (z właściwości exposes remote'a). Zwraca obietnicę zawierającą ten moduł.

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

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

Leniwe ładowanie tras remote'a

Najbardziej przejrzysty wzorzec polega na udostępnieniu pliku tras przez każdy remote i leniwym załadowaniu go w routerze hosta za pomocą loadChildren, dzięki czemu remote jest ładowany dopiero po odwiedzeniu jego trasy.

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

Ładowanie pojedynczego komponentu

Można również udostępnić i załadować pojedynczy samodzielny komponent, co jest przydatne przy osadzaniu widżetu zamiast całego obszaru tras.

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

Udostępnianie po stronie remote'a

Aby host mógł załadować dany element, remote musi wymienić jego eksport w mapie exposes. Klucz jest wartością przekazywaną przez hosta do loadRemoteModule.

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

Dynamiczne rozwiązywanie manifestu

Ponieważ host odczytuje manifest podczas uruchamiania, można zmieniać adresy URL remote'ów zależnie od środowiska (deweloperskiego, testowego, produkcyjnego) bez ponownego budowania hosta — wystarczy dostarczyć inny plik manifestu.

Obsługa błędów ładowania

Remote'y są ładowane przez sieć i mogą nie zadziałać (na przykład z powodu braku połączenia lub trwającego wdrożenia). Owiń operacje ładowania obsługą błędów, aby pojedynczy uszkodzony remote nie powodował awarii całej powłoki.

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

Przekazywanie danych przez granicę

Komunikacja między hostem a remote'em odbywa się za pomocą współdzielonych usług singletonów lub routera, a nie bezpośrednich importów. Współdzielona usługa uwierzytelniania (singleton) pozwala remote'owi odczytać bieżącego użytkownika ustawionego przez hosta.

Wersjonowanie i kontrakty

Udostępniony klucz (np. ./Routes) oraz struktura eksportowanego elementu tworzą kontrakt. Zmiana struktury eksportu może zepsuć hosty, które go ładują, dlatego udostępnione moduły należy traktować jak publiczne API i starannie nimi wersjonować.

Strategie wstępnego ładowania

Można wstępnie załadować remote'a po przejściu aplikacji w stan bezczynności, aby późniejsza nawigacja odbywała się natychmiast, jednocześnie zachowując niewielki początkowy czas ładowania. Pozwala to wyważyć szybkość uruchamiania i odczuwaną szybkość nawigacji.

Przepływ od początku do końca

Podsumowując ścieżkę uruchomieniową: host odczytuje manifest, użytkownik przechodzi do trasy federacyjnej, loadRemoteModule pobiera plik remoteEntry.json zdalnego modułu, współdzielone singletony są ponownie wykorzystywane, a trasy i komponent zdalnego modułu są renderowane wewnątrz powłoki hosta.

Szybkie sprawdzenie

Jak host leniwie ładuje zdalną funkcję?

Podsumowanie

Hosty ładują zdalne moduły w czasie działania za pomocą loadRemoteModule(name, key), zwykle wewnątrz loadChildren/loadComponent dla leniwie ładowanych tras. Zdalne moduły muszą udostępniać klucz za pomocą expose, a manifest rozwiązuje adresy URL zależnie od środowiska. Należy prawidłowo obsługiwać błędy ładowania, komunikować się za pomocą współdzielonych singletonów i traktować udostępnione moduły jako kontrakty podlegające wersjonowaniu.

Często zadawane pytania

Czy lekcja „Ładowanie zdalnych modułów” jest bezpłatna?

Tak — pełny tekst „Ładowanie zdalnych modułów” 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 „Ładowanie zdalnych modułów”?

Dynamicznie ładować zdalne micro frontendy Ć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 4 z 4.

Ile czasu zajmuje lekcja „Ładowanie zdalnych modułów”?

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