Scribd
Upload
272 views27 pages

Micro Frontends With Module Federation in Angular 12: Manfred Steyer, Angulararchitects - Io

This document discusses micro frontends with module federation in Angular 12. It provides an overview of module federation, how to set it up with the Angular CLI, improvements in Angular 12 like better monorepo support, and future features like multi-repository support. The presenter advocates for an evolutionary rather than revolutionary approach and keeping up with upcoming Angular CLI versions for small automation features.

Uploaded by

Francisco J Geospacial
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
272 views27 pages

Micro Frontends With Module Federation in Angular 12: Manfred Steyer, Angulararchitects - Io

This document discusses micro frontends with module federation in Angular 12. It provides an overview of module federation, how to set it up with the Angular CLI, improvements in Angular 12 like better monorepo support, and future features like multi-repository support. The presenter advocates for an evolutionary rather than revolutionary approach and keeping up with upcoming Angular CLI versions for small automation features.

Uploaded by

Francisco J Geospacial
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/ 27

Micro Frontends with Module Federation

in Angular 12

Manfred Steyer, ANGULARarchitects.io

ManfredSteyer
@ManfredSteyer
Contents

#1: #2:
#3:
Module What's new for
Future Features
Federation 101 MF & Angular 12

@ManfredSteyer
Manfred Steyer

@ManfredSteyer
@ManfredSteyer
Micro Frontends

@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
1) ng add @angular-architects/module-federation
2) Adjust generated configuration
3) ng serve

@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
Webpack 5 is Backed Into CLI 12
No need for forcing the CLI into webpack 5 anymore:

"resolutions": {
"webpack": "^5.0.0"
},

Feel free to use yarn or npm

@ManfredSteyer
Better Monorepo Support

Share like npm package

@ManfredSteyer
Big Thanks to Webpack's Tobias Koppers

@ManfredSteyer
Better Monorepo Support
Migrate from Angular 11?
Have a look on how we generate the webpack.config.js in Version 12

@ManfredSteyer
npm run run:all

@ManfredSteyer
Btw: Also Works Perfectly w/ Multiple Repos

Booking Boarding Shared

Booking App Boarding App

Feature Feature Feature Feature Feature

… … … … … … … … …

Repository 1 Repository 2
@ManfredSteyer Repository n
Tutorial is Updated
https://www.npmjs.com/package/@angular-architects/module-federation

@ManfredSteyer
Make sure you use Version ^12
for Angular 12!

@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
Evolution, not Revolution!

Keep Track with upcoming Angular CLI versions

Small Features to automate repetitive tasks

@ManfredSteyer
Free eBook
Updated for Module Federation
and Alternatives

ANGULARarchitects.io/book

@ManfredSteyer
Conclusion

Loading Better
Multi Repos
Separately Monorepo
supported too!
Deployed Code Support

run:all More to come!

@ManfredSteyer
Slides & Examples Remote Company Workshops
and Consulting

http://angulararchitects.io

d
@ManfredSteyer

You might also like