Micro Frontends with Module Federation:

Beyond the Basics

Manfred Steyer, ANGULARarchitects.io

ManfredSteyer
@ManfredSteyer
Booking App Check-in App

Luggage App Boarding App

@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
const Component = await import('other-app/cmp');

@ManfredSteyer
 #1 #2
Version Mono vs.
Mismatches Multirepo

#4
#3
Multiple
Dynamic
Frameworks/
Federation
Versions

@ManfredSteyer
 #1 #2
Version Mono vs.
#0 Mismatches Multirepo
Module
Federation 101 #4
#3
Multiple
Dynamic
Frameworks/
Federation
Versions

@ManfredSteyer
 Manfred Steyer

@ManfredSteyer
@ManfredSteyer
 Shell (Host) Microfrontend (Remote)

import('mfe1/Cmp')

// Maps Urls in // Expose files in

// webpack config // webpack config
remotes: { exposes: {
mfe1: "http://..." './Cmp': './my.cmp.ts'
} }

@ManfredSteyer
 Shell (Host) Microfrontend (Remote)

shared: [ shared: [
"@angular/core", "…" "@angular/core", "…"
] ]

@ManfredSteyer
1) ng add @angular-architects/module-federation
2) Adjust generated configuration
3) ng serve

@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
Selecting the highest compatible version

10.0 10.1

@ManfredSteyer
Conflict: No highest compatible version

11.0 10.1

@ManfredSteyer
shared: {
"my-lib": {
singleton: true
}
}

11.0 10.1

@ManfredSteyer
shared: {
"my-lib": {
singleton: true,
strictVersion: true // Error instead of warning!
}
}

11.0 10.1

@ManfredSteyer
shared: {
"my-lib": {
requiredVersion: ">=1.0.1 <11.1.1"
}
}

@ManfredSteyer
• Several options baked-in
• However, best option: avoid conflicts upfront

@ManfredSteyer
@ManfredSteyer
 Strict Borders

Booking Boarding Shared

Publish shared libs
Booking App Boarding App seperately via npm

Feature Feature Feature Feature Feature

Version Mismatches?
… … … … … … … … …

Repository 1 Repository 2
@ManfredSteyer Repository n
 Booking Boarding Shared

Booking App Boarding App

Feature Feature Feature Feature Feature

… … … … … … … … …

@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
 https://nrwl.io/nx

@ManfredSteyer
@ManfredSteyer
Dynamic Module Federation

Shell (Host) Microfrontend (Remote)

import('mfe1/Cmp')

remotes: { exposes: {
mfe1: "http://..." Cmp: './my.cmp.ts'
} }

@ManfredSteyer
Dynamic Module Federation

Shell (Host) Microfrontend (Remote)

import('mfe1/Cmp')

remotes: { exposes: {
} Cmp: './my.cmp.ts'
}

@ManfredSteyer
Dynamic Module Federation

Shell (Host) Microfrontend (Remote)

loadRemoteModule({
type: 'module',
remoteEntry: 'http://…',
exposedModule: './Cmp'
})
exposes: {
remotes: { Cmp: './my.cmp.ts'
} }

@ManfredSteyer
Dynamic Module Federation

Helper
ShellFunction
(Host) using Microfrontend (Remote)
the Webpack API
loadRemoteModule({
type: 'module',
remoteEntry: 'http://…',
exposedModule: './Cmp'
})
exposes: {
remotes: { Cmp: './my.cmp.ts'
} }

@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
const Component = await import('other-app/cmp');

@ManfredSteyer
const main = await import('other-app/main');

main.bootstrap();

@ManfredSteyer
const rootElm = document.createElement('app-root')
document.body.appendChild(rootElm);

const main = await import('other-app/main');

main.bootstrap();

@ManfredSteyer
const rootElm = document.createElement('app-root')
document.body.appendChild(rootElm);

await import('other-app/main'); // Self-Bootstrapping

@ManfredSteyer
WrapperComponent
const rootElm = document.createElement('app-root')
document.body.appendChild(rootElm);

await import('other-app/main');

@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
https://red-ocean-0fe4c4610.azurestaticapps.net

@ManfredSteyer
Free eBook (5th Edition)
Module Federation & Nx

ANGULARarchitects.io/book

@ManfredSteyer
Conclusion

Monorepo vs.
Baked-in Strategies
Multirepo:
for Version
Self-restriction vs.
Mismatches
(Costly) Freedom

Webpack Runtime Frankenstein:

API: Dynamic Bootstrapping
Federation Several SPAs

@ManfredSteyer
Slides & Examples Remote Company Workshops
and Consulting

http://angulararchitects.io

d
@ManfredSteyer