@ManfredSteyerMicro Frontends with Modern AngularManfredSteyer
View Slide
@ManfredSteyerAngular is changing …
@ManfredSteyer
@ManfredSteyerFederation &Standalone &esbuildFrankensteinw/ AngularElementsDeferredLoadingSSR &Hydration w/@angular/ssr
@ManfredSteyerManfred Steyer
@ManfredSteyerBooking App Check-in AppBoarding AppLuggage App
@ManfredSteyerconst Component = await import('other-app/xyz')
@ManfredSteyerMindset:ModuleFederationEcmaScriptModulesImport MapsSimple config, sharing libs
@ManfredSteyer1. ng add @angular-architects/native-federation […]2. Adjust generated config3. Start Shell and Micro Frontends
@ManfredSteyerWrap them into Web ComponentsAngular App(MFE)React App(MFE)
@ManfredSteyer→npm install @angular/elements
@ManfredSteyer→// bootstrap.tsconst app = await createApplication({providers: [],});
@ManfredSteyer→// bootstrap.tsconst app = await createApplication({providers: [],});const webCmp = createCustomElement(AppComponent, {injector: app.injector,});
@ManfredSteyer→// bootstrap.tsconst app = await createApplication({providers: [],});const webCmp = createCustomElement(AppComponent, {injector: app.injector,});customElements.define('mfe2-root', webCmp);
@ManfredSteyer→// bootstrap.tsconst app = await createApplication({providers: [],});const webCmp = createCustomElement(AppComponent, {injector: app.injector,});customElements.define('mfe2-root', webCmp);// Usage:
@ManfredSteyer// federation.config.jsmodule.exports = withNativeFederation({[…]exposes: {'./web-comp': './projects/mfe2/src/bootstrap.ts',},[…]});
@ManfredSteyerawait loadRemoteModule('other-app', './web-cmp');
@ManfredSteyerawait loadRemoteModule('other-app', './web-cmp');const rootElm = document.createElement('mfe2-root');document.body.appendChild(rootElm);
@ManfredSteyerawait loadRemoteModule('other-app', './web-cmp');const rootElm = document.createElement('web-cmp')document.body.appendChild(rootElm);WrapperComponent
@ManfredSteyerTitleContentCall to ActionInfoMore Info
@ManfredSteyer@defer on viewport {@main {}@placeholder {}[…]}
@ManfredSteyer1. Server: Render index.html2. Client: Make app interactive (Hydration)
@ManfredSteyerng add @angular/ssr- or -ng new --ssr
@ManfredSteyerHostRemoteRemoteHTMLHTML
@ManfredSteyer1. Server: Load HTML Fragments from MF2. Client: Load MF via Federation (Hydration)
@ManfredSteyerEasyNo VersionConflictsLot ofExperience
@ManfredSteyerng add @angular/ssrng add @angular-architects/native-federation …
@ManfredSteyerng g @angular-architects/native-federation:remove …ng add @angular/ssrng add @angular-architects/native-federation …
@ManfredSteyerSPA + SSRClassic SPAComplexityComplexityMonolith MF FrankensteinBiz AppsB2CTeam Autonomy →
@ManfredSteyerFree eBook (5th Edition)ANGULARarchitects.io/bookModule Federation & Nx
@ManfredSteyerModuleFederation:Mental Modelrocks!NativeFederationDeferredLoadingSSR withHTMLFragments
@ManfredSteyerdSlides & Examples Remote Company Workshopsand Consultinghttp://angulararchitects.io
manfredsteyer
findyinc
marcustung
os1ma
takamin55
parttimenerd
chimame
niftycorp
yusukebe
hiroyaonoe
smt7174
tomokusaba
cassininazir
ddemaree
michaelherold
bcantrill
kneath
marcduiker
tanoku
yeseniaperezcruz
aleyda
dougneiner
chriscoyier