@ManfredSteyer
Idea
const Component = await import('http://other-app/xyz')
Does not work with
webpack/ Angular CLI
Even lazy parts must be
known at compile time!
@ManfredSteyer
How to Get the Microfrontend's URL?
Shell (Host) Microfrontend (Remote)
RemoteEntry.js
Slide 9
Slide 9 text
@ManfredSteyer
How to Share Libs?
Shell (Host) Microfrontend (Remote)
shared: [
"@angular/core", "…"
]
shared: [
"@angular/core", "…"
]
Slide 10
Slide 10 text
@ManfredSteyer
Slide 11
Slide 11 text
@ManfredSteyer
?
Slide 12
Slide 12 text
@ManfredSteyer
Custom Builder
Slide 13
Slide 13 text
@ManfredSteyer
Slide 14
Slide 14 text
@ManfredSteyer
1) ng add @angular-architects/module-federation
2) Adjust generated configuration
3) ng serve
Slide 15
Slide 15 text
@ManfredSteyer
Slide 16
Slide 16 text
@ManfredSteyer
Slide 17
Slide 17 text
@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
Slide 18
Slide 18 text
@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
Free eBook
ANGULARarchitects.io/book
Updated for Module Federation
and Alternatives
Slide 22
Slide 22 text
@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)