Angular Micro-frontends
Module federation, architektura micro-frontend, współdzielone zależności, strategie wdrożenia, wzorce komunikacji
1Czym jest architektura micro-frontend w kontekście Angulara?
Czym jest architektura micro-frontend w kontekście Angulara?
Odpowiedź
Architektura micro-frontend dzieli monolityczną aplikację Angular na mniejsze, niezależne aplikacje, z których każda jest rozwijana i wdrażana osobno. Każdy micro-frontend może mieć własne repository, pipeline CI/CD i dedykowany zespół. Module Federation z Webpack 5 to zalecana technologia do implementacji tej architektury w Angular, umożliwiająca dynamiczne ładowanie kodu z innych aplikacji w runtime.
2Jaka jest rola Module Federation w architekturze micro-frontend Angular?
Jaka jest rola Module Federation w architekturze micro-frontend Angular?
Odpowiedź
Module Federation umożliwia współdzielenie kodu między aplikacjami Angular w runtime bez rebuildu. Każdy micro-frontend udostępnia moduły (remotes), które mogą być konsumowane przez inne aplikacje (hosts). Pozwala to uniknąć duplikacji kodu, zmniejszyć rozmiar bundle i umożliwia niezależne wdrożenia. Module Federation automatycznie obsługuje asynchroniczne ładowanie, rozwiązywanie zależności i współdzielenie wspólnych bibliotek takich jak Angular core.
3Jaka jest różnica między aplikacją host a aplikacją remote w Module Federation?
Jaka jest różnica między aplikacją host a aplikacją remote w Module Federation?
Odpowiedź
Aplikacja host konsumuje moduły udostępniane przez remote. Konfiguruje remote w swoim webpack.config i ładuje ich moduły dynamicznie. Aplikacja remote udostępnia moduły (component, service) do konsumpcji przez inne aplikacje. Ta sama aplikacja może być zarówno host, jak i remote. Host kontroluje shell aplikacji (header, navigation, layout), podczas gdy remote dostarczają funkcjonalności biznesowych.
Jak skonfigurować Module Federation w projekcie Angular z @angular-architects/module-federation?
Dlaczego ważne jest skonfigurowanie shared scope w Module Federation?
+17 pytań z rozmów
Inne tematy rekrutacyjne Angular
Podstawy TypeScript
TypeScript zaawansowany
Podstawy Angulara
Komponenty i cykl życia
Services & Dependency Injection
Organizacja modułów Angular
Angular CLI
Dyrektywy i Pipe'y
Routing i Nawigacja
Formularze reaktywne
Formularze template-driven
Podstawy RxJS
Operatory RxJS
HttpClient i wywołania API
Podstawowe zarządzanie stanem
Change Detection
Angular Signals
Standalone Components
Testy jednostkowe w Angular
Testowanie End-to-End
Build i optymalizacja
Podstawy NgRx
Zaawansowany NgRx
Architektura Angular
Optymalizacja wydajności
Bezpieczeństwo i najlepsze praktyki
Zaawansowane wzorce RxJS
Angular Universal i SSR
Opanuj Angular na następną rozmowę
Uzyskaj dostęp do wszystkich pytań, flashcards, testów technicznych, ćwiczeń code review i symulatorów rozmów.
Zacznij za darmo