Angular Micro-Frontends
Module Federation, Micro-Frontend-Architektur, geteilte Abhängigkeiten, Deployment-Strategien, Kommunikationsmuster
1Was ist eine Micro-Frontend-Architektur im Angular-Kontext?
Was ist eine Micro-Frontend-Architektur im Angular-Kontext?
Antwort
Eine Micro-Frontend-Architektur teilt eine monolithische Angular-Anwendung in kleinere, unabhängige Anwendungen auf, die jeweils separat entwickelt und deployed werden. Jedes Micro-Frontend kann sein eigenes Repository, eine eigene CI/CD-Pipeline und ein dediziertes Team haben. Module Federation von Webpack 5 ist die empfohlene Technologie zur Implementierung dieser Architektur in Angular und ermöglicht das dynamische Laden von Code aus anderen Anwendungen zur Runtime.
2Welche Rolle spielt Module Federation in einer Angular-Micro-Frontend-Architektur?
Welche Rolle spielt Module Federation in einer Angular-Micro-Frontend-Architektur?
Antwort
Module Federation ermöglicht das Teilen von Code zwischen Angular-Anwendungen zur Runtime ohne Rebuild. Jedes Micro-Frontend stellt Module (Remotes) bereit, die von anderen Anwendungen (Hosts) konsumiert werden können. Dies vermeidet Code-Duplizierung, reduziert Bundle-Größen und ermöglicht unabhängige Deployments. Module Federation handhabt automatisch das asynchrone Laden, die Auflösung von Abhängigkeiten und das Teilen gemeinsamer Bibliotheken wie Angular Core.
3Was ist der Unterschied zwischen einer Host-Anwendung und einer Remote-Anwendung in Module Federation?
Was ist der Unterschied zwischen einer Host-Anwendung und einer Remote-Anwendung in Module Federation?
Antwort
Die Host-Anwendung konsumiert Module, die von Remotes bereitgestellt werden. Sie konfiguriert Remotes in ihrer webpack.config und lädt deren Module dynamisch. Eine Remote-Anwendung stellt Module (Components, Services) bereit, um von anderen Anwendungen konsumiert zu werden. Dieselbe Anwendung kann sowohl Host als auch Remote sein. Der Host steuert die Anwendungs-Shell (Header, Navigation, Layout), während Remotes geschäftliche Funktionalitäten bereitstellen.
Wie konfiguriert man Module Federation in einem Angular-Projekt mit @angular-architects/module-federation?
Warum ist es wichtig, den Shared Scope in Module Federation zu konfigurieren?
+17 Interview-Fragen
Weitere Angular-Interviewthemen
TypeScript-Grundlagen
TypeScript Fortgeschritten
Angular-Grundlagen
Komponenten und Lebenszyklus
Services & Dependency Injection
Angular-Modul-Organisation
Angular CLI
Direktiven und Pipes
Routing und Navigation
Reactive Forms
Template-driven Forms
RxJS-Grundlagen
RxJS-Operatoren
HttpClient und API-Aufrufe
Grundlegende State-Verwaltung
Change Detection
Angular Signals
Standalone Components
Angular Unit-Tests
End-to-End-Testing
Build und Optimierung
NgRx-Grundlagen
NgRx Fortgeschritten
Angular-Architektur
Performance-Optimierung
Sicherheit und Best Practices
Fortgeschrittene RxJS-Patterns
Angular Universal und SSR
Meistere Angular für dein nächstes Interview
Zugang zu allen Fragen, Flashcards, technischen Tests, Code-Review-Übungen und Interview-Simulatoren.
Kostenlos starten