Angular Micro-frontends
Module federation, micro-frontend architecture, shared dependencies, deployment strategies, communication patterns
1What is a micro-frontend architecture in the Angular context?
What is a micro-frontend architecture in the Angular context?
Answer
A micro-frontend architecture splits a monolithic Angular application into smaller, independent applications, each developed and deployed separately. Each micro-frontend can have its own repository, CI/CD pipeline and dedicated team. Webpack 5's Module Federation is the recommended technology to implement this architecture in Angular, allowing dynamic loading of code from other applications at runtime.
2What is the role of Module Federation in an Angular micro-frontend architecture?
What is the role of Module Federation in an Angular micro-frontend architecture?
Answer
Module Federation allows code sharing between Angular applications at runtime without rebuild. Each micro-frontend exposes modules (remotes) that can be consumed by other applications (hosts). This avoids code duplication, reduces bundle sizes and enables independent deployments. Module Federation automatically handles asynchronous loading, dependency resolution and sharing of common libraries like Angular core.
3What is the difference between a host application and a remote application in Module Federation?
What is the difference between a host application and a remote application in Module Federation?
Answer
The host application consumes modules exposed by remotes. It configures remotes in its webpack.config and loads their modules dynamically. A remote application exposes modules (components, services) to be consumed by other applications. The same application can be both host and remote. The host controls the application shell (header, navigation, layout) while remotes provide business features.
How to configure Module Federation in an Angular project with @angular-architects/module-federation?
Why is it important to configure the shared scope in Module Federation?
+17 interview questions
Other Angular interview topics
TypeScript Basics
TypeScript Advanced
Angular Fundamentals
Components & Lifecycle
Services & Dependency Injection
Angular Modules Organization
Angular CLI
Directives & Pipes
Routing & Navigation
Reactive Forms
Template-driven Forms
RxJS Fundamentals
RxJS Operators
HttpClient & API Calls
Basic State Management
Change Detection
Angular Signals
Standalone Components
Angular Unit Testing
End-to-End Testing
Build & Optimization
NgRx Fundamentals
NgRx Advanced
Angular Architecture
Performance Optimization
Security & Best Practices
Advanced RxJS Patterns
Angular Universal & SSR
Master Angular for your next interview
Access all questions, flashcards, technical tests, code review exercises and interview simulators.
Start for free