Scribd
Upload
13 views24 pages

Module Federation

Uploaded by

joel.marinho
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
13 views24 pages

Module Federation

Uploaded by

joel.marinho
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 24

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

You might also like