Angular Academy · Lekcja

Udostępnianie zależności

Udostępniać Angulara i biblioteki między zdalnymi aplikacjami

Udostępnianie zależności to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 3 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 współdzielić zależności

Jeśli host i trzy remote'y dołączą do swoich bundli własne kopie Angulara, przeglądarka pobierze Angulara cztery razy, a co gorsza, otrzyma wiele instancji Angulara, co zepsuje wstrzykiwanie zależności. Współdzielenie gwarantuje, że jedna kopia zostanie załadowana raz i ponownie użyta przez wszystkich.

Sekcja shared

W pliku federation.config.js obiekt shared określa zależności współdzielone między hostem i remote'ami. Native Federation usuwa ich duplikaty w czasie działania.

module.exports = withNativeFederation({
  shared: {
    ...shareAll({ singleton: true, strictVersion: true }),
  },
});

Pomocnik shareAll

shareAll() współdzieli wszystkie zależności z pliku package.json za pomocą jednej konfiguracji, co stanowi typowy punkt wyjścia. Następnie można nadpisać ustawienia wybranych pakietów.

shared: {
  ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
}

singleton: dlaczego ma znaczenie w Angularze

singleton: true wymusza użycie dokładnie jednej instancji pakietu w całej aplikacji. Angular core, RxJS i router MUSZĄ być singletonami; dwie kopie @angular/core oznaczają dwa drzewa injectorów i błędy w czasie działania.

Negocjowanie wersji

Gdy remote'y żądają różnych wersji, federacja wybiera zgodną wersję. strictVersion: true zgłasza błąd w przypadku niezgodności zamiast po cichu ładować niedopasowaną wersję, dzięki czemu problemy są wykrywane wcześniej.

shared: {
  '@angular/core': { singleton: true, strictVersion: true, requiredVersion: '^18.0.0' },
}

Współdzielenie własnych bibliotek

Współdzielona biblioteka systemu projektowego lub uwierzytelniania również powinna być singletonem, aby stan (np. bieżący użytkownik) był spójny. Należy udostępnić ją jawnie, podając jej nazwę.

shared: {
  '@myorg/design-system': { singleton: true, requiredVersion: 'auto' },
  '@myorg/auth': { singleton: true },
}

requiredVersion: auto

requiredVersion: 'auto' odczytuje wersję z pliku package.json, dzięki czemu nie trzeba wpisywać jej na stałe. Pozwala to zachować zgodność konfiguracji z aktualizowanymi zależnościami.

Co dzieje się w czasie działania

Każda kompilacja generuje metadane dotyczące współdzielonych pakietów. Podczas ładowania federacja porównuje wersje między hostem i remote'ami, a następnie udostępnia jeden współdzielony moduł za pośrednictwem mapy importu, dzięki czemu przeglądarka pobiera go tylko raz.

Koszt braku współdzielenia

Zapomnienie o współdzieleniu Angulara to klasyczny błąd: aplikacja początkowo wydaje się działać, a następnie zgłasza niejasne błędy, takie jak „NG0203: inject() must be called from an injection context”, ponieważ istnieją dwie kopie Angulara. Współdzielenie jako singleton zapobiega temu problemowi.

Utrzymywanie zgodnych wersji

Niezależne wdrożenia mogą z czasem się rozjechać. Zespoły powinny uzgodnić wspólny zakres wersji pakietów frameworka i aktualizować je wspólnie, ponieważ host korzystający z Angulara 18 nie może bezpiecznie współdzielić zależności z remote'em wymagającym Angulara 17.

Pominięcie współdzielonego pakietu

Czasami remote potrzebuje własnej, odizolowanej kopii małego narzędzia. Można wyłączyć je ze współdzielenia, aby zostało dołączone prywatnie do bundla, akceptując większy rozmiar w zamian za niezależność.

shared: {
  ...shareAll({ singleton: true }),
}
// skip a package by removing it from the shared map / excluding it

Szybkie sprawdzenie

Które pakiety muszą być singletonami?

Podsumowanie

Deklaruj współdzielone zależności w shared (często za pomocą shareAll), aby host i remote'y ładowały jedną kopię. Ustaw singleton: true dla frameworka i bibliotek przechowujących stan (@angular/core, router, RxJS, własna biblioteka uwierzytelniania); używaj strictVersion oraz requiredVersion: 'auto', aby wykrywać rozbieżności. Brak współdzielenia Angulara powoduje błędy DI.

Często zadawane pytania

Czy lekcja „Udostępnianie zależności” jest bezpłatna?

Tak — pełny tekst „Udostępnianie zależności” 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 „Udostępnianie zależności”?

Udostępniać Angulara i biblioteki między zdalnymi aplikacjami Ć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 3 z 4.

Ile czasu zajmuje lekcja „Udostępnianie zależności”?

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