The Microfrontend Revolution
Module Federation with Angular
Manfred Steyer, ANGULARarchitects.io
ManfredSteyer
@ManfredSteyer
Contents
#1: #2
Module Federated
Federation Angular
#3:
Version
Mismatch
@ManfredSteyer
Manfred Steyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
Idea
Does not work with
webpack/ Angular CLI
const Component = await import('http://other-app/xyz')
Even lazy parts must be
known at compile time!
@ManfredSteyer
Webpack 5 Module Federation
Shell (Host) Microfrontend (Remote)
import('mfe1/Cmp')
// Maps Urls in // Expose files in
// webpack config // webpack config
remotes: { exposes: {
mfe1: "mfe1" './Cmp': './my.cmp.ts'
} }
@ManfredSteyer
How to Get the Microfrontend's URL?
Shell (Host) Microfrontend (Remote)
<script src="…"></script> RemoteEntry.js
@ManfredSteyer
How to Share Libs?
Shell (Host) Microfrontend (Remote)
shared: [ shared: [
"@angular/core", "…" "@angular/core", "…"
] ]
@ManfredSteyer
@ManfredSteyer
?
@ManfredSteyer
Custom Builder
@ManfredSteyer
@ManfredSteyer
1) ng add @angular-architects/module-federation
2) Adjust generated configuration
3) ng serve
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
Dealing with Version Mismatch
SemVer by Default: Highest compatiable version
Fallback: Use own version
Relaxing: Configure a range of accepted versions
Singleton: Warning or error
@ManfredSteyer
Example for SemVer and Fallback
• Shell: my-lib: ^10.0.0
• MFE1: my-lib: ^10.1.1
• MFE2: my-lib: ^9.0.0
Result:
• Shell and MFE1 share ^10.1.1
• MFE2 falls back to its own version ^9.0.0
@ManfredSteyer
Configuring Singletons
shared: {
"my-lib": {
singleton: true,
strictVersion: true // Error instead of warning!
}
}
@ManfredSteyer
Relaxing Version Requirements
shared: {
"my-lib": {
requiredVersion: ">=1.0.1 <11.1.1"
}
}
@ManfredSteyer
Free eBook
Updated for Module Federation
and Alternatives
ANGULARarchitects.io/book
@ManfredSteyer
When can we have it?
Webpack 5 and Module Federation: final
Angular CLI must support webpack 5 too
Angular CLI 11 (Beta) allows to opt into webpack 5
Angular CLI 11 ? (fall 2020)
@ManfredSteyer
Conclusion
Loading
Module
Separately
Federation
Deployed Code
Federated Version
Angular Mismatch
@ManfredSteyer
Slides & Examples Remote Company Workshops
and Consulting
http://angulararchitects.io
d
@ManfredSteyer
